/* Evidence page components. Synthetic data. */

/* list rows inside windows */
.ev-rows { padding: 6px 0; }
.ev-row { height: 46px; padding: 0 16px; display: grid; grid-template-columns: 64px 18px minmax(0, 1fr) 96px 150px 24px; gap: 12px; align-items: center; border-bottom: 1px solid var(--line-2); color: var(--fg-2); }
.ev-row .id { font-family: "Geist Mono", monospace; font-size: 11.5px; color: var(--fg-3); }
.ev-row .nm { color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-row .chips { display: flex; gap: 4px; overflow: hidden; }
.ev-row .chips .ap-ev { height: 18px; font-size: 10.5px; }
.ev-ic { width: 14px; height: 16px; border-radius: 3px; box-shadow: inset 0 0 0 1.25px var(--fg-4); position: relative; }
.ev-ic::after { content: ""; position: absolute; left: 3px; right: 3px; top: 5px; height: 1.25px; background: var(--fg-4); box-shadow: 0 3px 0 var(--fg-4), 0 6px 0 var(--fg-4); }
.ev-row.ph-row .nm { visibility: hidden; }
.ev-row.ph-row::after { content: ""; }

/* upload sheet rows */
/* ---------- replace a file: the tree of what relied on it (restored from the Old site, evidence.css 62-83, 332-339) ---------- */
.ev-tree { position: relative; height: 640px; margin: 24px; }
.ev-node { position: absolute; left: 0; width: 240px; padding: 14px 16px; border-radius: 12px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3); display: flex; flex-direction: column; gap: 6px; transition: opacity .6s, transform .6s var(--ease-enter); }
.ev-node b { font-weight: 500; }
.ev-node .ap-key { align-self: flex-start; }
.ev-node small { color: var(--fg-3); font-size: 12px; }
.ev-v { top: 150px; }
.ev-v2 { top: 270px; opacity: 0; transform: translateY(10px); }
.ev-tree.go .ev-v2 { opacity: 1; transform: none; }
.ev-lines { position: absolute; left: 0; top: 0; width: 100%; height: 420px; overflow: visible; }
.ev-lines path { fill: none; stroke: var(--fg-4); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 4 6; stroke-dashoffset: 0; opacity: 0; transition: opacity .6s; }
.ev-tree.go .ev-lines path { opacity: 1; animation: ev-flow 1.2s linear infinite; }
@keyframes ev-flow { to { stroke-dashoffset: -20; } }
.ev-tdep { position: absolute; left: 56%; width: 40%; height: 52px; margin-top: -26px; padding: 0 14px; border-radius: 12px; display: flex; align-items: center; gap: 10px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3); color: var(--fg-2); opacity: .35; transition: opacity .5s, box-shadow .5s; }
.ev-tback { margin-left: auto; height: 22px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 12px; color: var(--amber); background: var(--amber-tint); opacity: 0; transition: opacity .4s; white-space: nowrap; }
.ev-tree.go .ev-tdep { opacity: 1; }
.ev-tdep.on .ev-tback { opacity: 1; }
@media (max-width: 900px) { .ev-tdep { left: 46%; width: 52%; } }
@media (max-width: 640px) {
  /* replace a version: the two versions side by side, the affected work listed under them */
  .ev-tree { margin: 14px; }
  .ev-lines { display: none; }
  .ev-node { width: calc(50% - 5px); top: 0; padding: 12px; }
  .ev-v2 { left: calc(50% + 5px); }
  .ev-tdep { left: 0; width: 100%; height: 58px; margin-top: 0; padding: 0 12px; line-height: 1.3; font-size: 13px; }
  .ev-tdep:nth-of-type(3) { top: 126px !important; } .ev-tdep:nth-of-type(4) { top: 192px !important; }
  .ev-tdep:nth-of-type(5) { top: 258px !important; } .ev-tdep:nth-of-type(6) { top: 324px !important; }
  .ev-tback { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .ev-tree .ev-lines path { animation: none !important; } }

/* ---------- section 2: every file type, one in focus (B1 icon-key field with edge blur) ---------- */
.ev-keys { position: absolute; z-index: 3; left: 0; top: 70px; width: 56%; height: 620px; transform: perspective(1400px) rotateX(16deg) rotateZ(-4deg); transform-origin: 50% 50%;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, rgba(0,0,0,.4) 70%, transparent 100%); mask-image: radial-gradient(closest-side, #000 40%, rgba(0,0,0,.4) 70%, transparent 100%); }
.ev-key { position: absolute; left: calc(50% + var(--x) * 112px - 48px); top: calc(50% + var(--y) * 112px - 48px); width: 96px; height: 96px; border-radius: 18px; display: grid; place-items: center; align-content: center; gap: 6px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); box-shadow: inset 0 0 0 1px var(--line-3), inset 0 1px 0 #ffffff0f, 0 2px 0 #00000059;
  color: var(--fg-3); filter: blur(calc(var(--d) * 1.5px)); opacity: calc(1 - var(--d) * .25); }
.ev-key svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ev-key > span:not(.ev-key-tip) { font: 500 10.5px "Geist Mono", monospace; letter-spacing: .06em; color: var(--fg-4); }
.ev-key.on { z-index: 2; color: var(--fg-1); background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); box-shadow: inset 0 0 0 1px var(--fg-4), inset 0 1px 0 #ffffff1a, 0 2px 0 #00000080; transition: box-shadow var(--dur-hover); }
.ev-key.on > span:not(.ev-key-tip) { color: var(--fg-2); }
.ev-key.on:focus-visible { outline: 2px solid var(--fg-3); outline-offset: 3px; }
@media (any-hover: hover) { .ev-key.on:hover { box-shadow: inset 0 0 0 1px var(--fg-3), inset 0 1px 0 #ffffff1a, 0 2px 0 #00000080; } }
.ev-key-tip { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translate(-50%, 4px); padding: 7px 10px; border-radius: 8px; white-space: nowrap; font-size: 12px; color: var(--fg-1); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3), 0 8px 24px #00000059; opacity: 0; pointer-events: none; transition: opacity var(--dur-hover), transform var(--dur-hover); }
.ev-key.on:hover .ev-key-tip, .ev-key.on:focus-visible .ev-key-tip { opacity: 1; transform: translate(-50%, 0); }
:root[data-theme="light"] .ev-key { background: linear-gradient(180deg, #ffffff, #f4f4f6); box-shadow: inset 0 0 0 1px #00000014, inset 0 -1px 0 #0000000a, 0 2px 0 #0000000f; }
:root[data-theme="light"] .ev-key.on { box-shadow: inset 0 0 0 1px #00000033, 0 2px 0 #00000014; }
:root[data-theme="light"] .ev-key-tip { background: #fff; box-shadow: inset 0 0 0 1px #0000001a, 0 8px 24px #0000001a; }
.ev-s1-files { left: 54%; top: 96px; width: 56%; height: 720px; }
.ev-u { padding: 14px 20px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; border-bottom: 1px solid var(--line-2); }
.ev-u .nm { color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-u .s { color: var(--fg-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.ev-u .bar { grid-column: 2 / 4; height: 3px; border-radius: 3px; background: var(--line-2); overflow: hidden; transition: opacity .4s; }
.ev-u .bar i { display: block; height: 100%; width: 0; background: var(--fg-2); transition: width .25s linear; }
.ev-u .det { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--fg-3); font-size: 12px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--ease-enter), opacity .6s var(--ease-enter); }
.ev-u .det.on { max-height: 60px; opacity: 1; }
.ev-u .det .ap-ev.cu { color: var(--cu); background: var(--cu-tint); box-shadow: inset 0 0 0 1px var(--cu-line); }
.ev-u .det .type { color: var(--fg-2); }

/* requirement beside source */
.ev-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 24px; }
.ev-lbl { font-size: 12px; color: var(--fg-3); margin-bottom: 10px; }
.ev-req { display: flex; flex-direction: column; gap: 12px; }
.ev-req-h { display: flex; gap: 10px; align-items: flex-start; }
.ev-req-h b { font-weight: 560; font-size: 15px; letter-spacing: -0.01em; line-height: 1.35; }
.ev-req p { color: var(--fg-2); line-height: 1.6; }
/* a config file cited by lines: line numbers in the gutter, the cited lines underlined */
.ev-code p { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12.5px; line-height: 1.75; white-space: pre; }
.ev-code p + p { margin-top: 0; }
.ev-code i { font-style: normal; color: var(--fg-4); text-align: right; }
.ev-code mark { justify-self: start; }
.ev-code p > span { justify-self: start; }
.ev-src .src-excerpt { padding-bottom: 14px; }
.ev-decide { margin: 0 24px; padding: 14px 16px; border-radius: 12px; display: flex; align-items: center; gap: 12px; background: var(--cu-tint-2); box-shadow: inset 0 0 0 1px var(--cu-line); transition: background .5s, box-shadow .5s; }
.ev-decide .r { margin-left: auto; display: flex; gap: 8px; }
.ev-decide-t { color: var(--fg-2); }
.ev-decide.done { background: var(--ok-tint); box-shadow: none; }
.ev-decide .ap-badge .ai-mark { font-size: 12px; }

/* fanned pages and the marked passage */
.ev-fan { position: absolute; left: 50%; top: 90px; width: 760px; height: 760px; transform: translateX(-50%); }
.ev-page { position: absolute; inset: 0 0 auto 0; height: 760px; border-radius: 12px 12px 0 0; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3), 0 30px 60px #00000066; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.ev-page.p3 { transform: translate(-150px, 56px) rotate(-5deg) scale(.92); filter: blur(2px) brightness(.6); }
.ev-page.p2 { transform: translate(140px, 34px) rotate(4deg) scale(.95); filter: blur(1.4px) brightness(.72); }
.ev-page.p1 { padding: 0; gap: 0; }
.ev-page-bar { height: 44px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-2); color: var(--fg-3); font-size: 12.5px; }
.ev-page-bar .r { margin-left: auto; display: flex; gap: 14px; }
.ev-zoom { color: var(--fg-1); }
/* the original, four kinds of place: lines, rows, a region, interview lines. Each crossfades; marks wipe in. */
.ev-kinds { position: relative; margin: 28px 32px; height: 360px; }
.ev-kind { position: absolute; inset: 0 0 auto 0; opacity: 0; filter: blur(4px); transform: translateY(8px); transition: opacity var(--dur-swap) var(--ease-swap), filter var(--dur-swap) var(--ease-swap), transform var(--dur-swap) var(--ease-swap); }
.ev-kind.on { opacity: 1; filter: none; transform: none; }
.ev-kind .src-excerpt { font-size: 14.5px; padding: 18px 20px; }
.ev-kind .ev-code p { font-size: 13.5px; line-height: 1.85; }
.ev-kind mark { background-size: 0% 1px; }
.ev-kind.lit mark { background-size: 100% 1px; color: var(--fg-1); }
.ev-sheet { display: flex; flex-direction: column; padding: 6px 0 !important; }
.ev-tr { display: grid; grid-template-columns: 30px 1.3fr 1fr 1.2fr; gap: 12px; align-items: center; height: 44px; padding: 0 18px; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.ev-tr:last-child { border-bottom: 0; }
.ev-tr i { font-style: normal; font-family: "Geist Mono", monospace; font-size: 11.5px; color: var(--fg-4); }
.ev-tr.h { height: 36px; color: var(--fg-3); font-size: 12px; }
.ev-tr span, .ev-tr mark { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-self: start; max-width: 100%; }
.ev-tr.c { background: color-mix(in srgb, var(--fg-1) 3%, transparent); }
/* a screenshot cited by region: a drawn console, the region outlined */
.ev-shot { display: grid; grid-template-columns: 54px minmax(0, 1fr); border-radius: 8px; overflow: hidden; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3); font-size: 13.5px; }
:root[data-theme="light"] .ev-shot { background: var(--bg-1); }
.ev-shot-nav { padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--line-2); }
.ev-shot-nav i { height: 22px; border-radius: 5px; background: color-mix(in srgb, var(--fg-1) 7%, transparent); }
.ev-shot-main { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 4px; }
.ev-shot-t { font-weight: 500; color: var(--fg-1); margin-bottom: 8px; font-family: "Geist Mono", monospace; font-size: 13px; }
.ev-shot-kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-2); color: var(--fg-3); }
.ev-shot-kv b { font-weight: 400; color: var(--fg-2); }
.ev-shot-box { position: relative; margin: 2px -10px; padding: 0 10px; border-radius: 6px; }
.ev-shot-box::after { content: ""; position: absolute; inset: -2px; border-radius: 7px; border: 1px dashed color-mix(in srgb, var(--cu) 55%, transparent); clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-draw) var(--ease-spring); }
.ev-kind.lit .ev-shot-box::after { clip-path: inset(0 0 0 0); }
.ev-kind.lit .ev-shot-box b { color: var(--fg-1); }
.ev-int p { display: grid; grid-template-columns: 22px 92px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--line-2); }
.ev-int p:first-child { border-top: 0; }
.ev-int p + p { margin-top: 0; }
.ev-int i { font-style: normal; font-family: "Geist Mono", monospace; font-size: 11.5px; color: var(--fg-4); padding-top: 3px; }
.ev-int b { font-weight: 400; color: var(--fg-3); font-size: 12.5px; padding-top: 2px; }
.ev-int mark { justify-self: start; }
.ev-ktabs { position: absolute; left: 50%; top: 500px; transform: translateX(-50%); display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3); font-size: 12.5px; color: var(--fg-3); z-index: 6; }
.ev-ktabs span { height: 28px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; white-space: nowrap; transition: background var(--dur-hover), color var(--dur-hover); }
.ev-ktabs span.on { background: var(--bg-3); color: var(--fg-1); }
.ev-pop { position: absolute; right: -70px; top: 330px; z-index: 5; width: 300px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--bg-2) 94%, transparent); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line-3), var(--float), 0 20px 40px #00000080; font-size: 12.5px; color: var(--fg-3); opacity: 0; transform: translateY(8px); filter: blur(4px); transition: opacity var(--dur-enter) var(--ease-spring), transform var(--dur-enter) var(--ease-spring), filter var(--dur-enter) var(--ease-spring); }
.ev-pop.on { opacity: 1; transform: none; filter: none; }
.ev-pop-h { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ev-pop-r { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); display: flex; gap: 8px; align-items: center; color: var(--fg-2); }

/* replace: v3 lands over v2; the work that relied on v2 goes back for review (tests and mappings only) */

@media (max-width: 768px) {
  .ev-s1 .stage2-in { height: 760px; }
  .ev-keys { left: 50%; top: 0; width: 520px; height: 380px; margin-left: -260px; transform: perspective(1400px) rotateX(16deg) rotateZ(-4deg) scale(.82); }
  .ev-s1-files { left: 12px; width: calc(100% - 24px); top: 340px; height: 420px; }
}
@media (max-width: 900px) {
  .ev-pair { grid-template-columns: 1fr; }
  .ev-fan { width: 92%; }
  .ev-pop { right: 10px; }
}
.ev-more { margin: 28px 24px 0; }
.ev-more-r { height: 48px; padding: 0 4px; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line-2); color: var(--fg-2); }
.ev-more-r .r { margin-left: auto; color: var(--fg-3); font-size: 12px; }
.ev-more-r .ph { flex: 0 0 40%; }
.ev-more-r.ph-r { opacity: .55; }

/* ---------- shared: the two big stages under pillars 1 and 2 ---------- */
.ev-wv, .ev-sw { position: relative; margin-top: 72px; padding: 32px 40px 0; border-radius: 20px; background: radial-gradient(70% 90% at 50% 0%, #1d1e21 0%, #121315 40%, var(--bg) 85%); box-shadow: inset 0 1px 0 #ffffff12, inset 0 0 0 1px #ffffff0a; }
:root[data-theme="light"] .ev-wv, :root[data-theme="light"] .ev-sw { background: radial-gradient(70% 90% at 50% 0%, #f1f1f3 0%, #f7f7f8 50%, var(--bg) 100%); box-shadow: inset 0 0 0 1px #0000000d; }
.ev-wv-cap { margin: 28px -40px 0; padding: 24px 40px 30px; border-top: 1px solid var(--line); }
.ev-wv-cap h3 { font-size: 15px; font-weight: 500; }
.ev-wv-cap p { margin-top: 4px; color: var(--fg-3); font-size: 15px; max-width: 72ch; }

/* ---------- the weave ---------- */
.ev-wv-top { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 28px; font-size: 13px; color: var(--fg-3); }
.ev-run { height: 30px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; box-shadow: inset 0 0 0 1px var(--line-3); background: var(--bg-1); color: var(--fg-2); white-space: nowrap; }
.ev-run .d { width: 7px; height: 7px; border-radius: 99px; background: var(--fg-4); flex: none; }
.ev-run.busy .d { background: var(--fg-2); }
.ev-run.ok .d { background: var(--ok); }
.ev-run.amber .d { background: var(--amber); }
.ev-run .ai-mark { font-size: 13px; }
.ev-tally { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.ev-tally span { white-space: nowrap; }
.ev-tally b { color: var(--fg-1); font-weight: 560; font-variant-numeric: tabular-nums; }

.ev-wv-body { position: relative; display: grid; grid-template-columns: 340px minmax(140px, 1fr) auto; align-items: start; }
.ev-wv-files { grid-column: 1; position: relative; z-index: 1; }
.ev-wv-reqs { grid-column: 3; position: relative; z-index: 1; }
.ev-wv-c, .ev-wv-hi { position: absolute; left: 0; top: 0; pointer-events: none; }
.ev-wv-hi { z-index: 2; }
.ev-wv-h { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-size: 12px; color: var(--fg-3); }
.ev-wv-h span + span { color: var(--fg-4); }

.ev-fgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 7px 6px; }
.ev-f { position: relative; aspect-ratio: 13 / 17; border-radius: 2px; clip-path: polygon(0 0, 64% 0, 100% 26%, 100% 100%, 0 100%); box-shadow: inset 0 0 0 1px var(--line-3); opacity: 1; transition: background .45s var(--ease-enter), box-shadow .45s var(--ease-enter), opacity .5s var(--ease-enter), transform .5s var(--ease-enter); }
.ev-f.e { opacity: .28; box-shadow: inset 0 0 0 1px var(--line-2); transform: translateX(-14px); }
.ev-wv.arr .ev-f { transition-delay: var(--dl); transition-duration: .7s; }
.ev-f.s-up { box-shadow: inset 0 0 0 1px var(--fg-3); }
.ev-f.s-pr { background: var(--bg-4); box-shadow: none; }
.ev-f.s-tr { background: var(--cu-tint); box-shadow: inset 0 0 0 1px var(--cu); }
.ev-f.s-mp { background: color-mix(in srgb, var(--ok) 72%, transparent); box-shadow: none; }
.ev-f.s-nm { box-shadow: inset 0 0 0 1px var(--fg-4); }
.ev-f.s-ro { background: repeating-linear-gradient(135deg, var(--fg-4) 0 1px, transparent 1px 3px); box-shadow: inset 0 0 0 1px var(--fg-4); }
.ev-f.s-cp { box-shadow: inset 0 0 0 1.25px var(--red); }
.ev-f.cc::after { content: ""; position: absolute; left: 50%; top: 58%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 99px; background: var(--amber); }
.ev-wv.hl .ev-f:not(.on) { opacity: .3; }
.ev-f.on { clip-path: none; z-index: 2; outline: 1.5px solid var(--fg-1); outline-offset: 1px; }

.ev-rq { display: flex; align-items: center; gap: 10px; height: 19px; }
.ev-rq + .ev-rq { margin-top: 4px; }
.ev-rq-cells { display: flex; gap: 3px; width: calc(37 * 14px - 3px); }
.ev-c { flex: none; width: 11px; height: 11px; border-radius: 2.5px; box-shadow: inset 0 0 0 1px var(--line-3); transition: background .5s var(--ease-enter), box-shadow .5s var(--ease-enter), opacity .4s, transform .4s var(--ease-enter); }
.ev-c.w { background: var(--cu-tint); box-shadow: inset 0 0 0 1px var(--cu); }
.ev-c.h1 { background: color-mix(in srgb, var(--ok) 30%, transparent); box-shadow: none; }
.ev-c.h2 { background: color-mix(in srgb, var(--ok) 52%, transparent); box-shadow: none; }
.ev-c.h3 { background: color-mix(in srgb, var(--ok) 76%, transparent); box-shadow: none; }
.ev-c.h4 { background: var(--ok); box-shadow: none; }
.ev-c.w.h1, .ev-c.w.h2, .ev-c.w.h3, .ev-c.w.h4 { box-shadow: inset 0 0 0 1.25px var(--cu); }
.ev-c.na { background: repeating-linear-gradient(135deg, var(--fg-4) 0 1px, transparent 1px 3.5px); box-shadow: none; opacity: .55; }
.ev-c.gap { background: color-mix(in srgb, var(--amber) 16%, transparent); box-shadow: inset 0 0 0 1.25px var(--amber); }
.ev-wv.hl .ev-c:not(.on) { opacity: .35; }
.ev-c.on { outline: 1.5px solid var(--fg-1); outline-offset: 1px; position: relative; z-index: 2; }
.ev-rq-b { appearance: none; border: 0; background: none; font: inherit; font-size: 12px; color: var(--fg-3); width: 48px; height: 19px; padding: 0 4px; border-radius: 6px; text-align: left; white-space: nowrap; cursor: pointer; transition: color .2s, background .2s; }
.ev-rq-b:hover, .ev-rq-b.on { color: var(--fg-1); background: var(--bg-3); }
.ev-rq-b:focus-visible { outline: 2px solid var(--fg-2); outline-offset: 0; }

.ev-tip { position: absolute; left: 0; top: 0; z-index: 4; width: 320px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--bg-2) 95%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line-3), 0 20px 40px #00000080; font-size: 12.5px; line-height: 1.5; color: var(--fg-3); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease-enter); }
:root[data-theme="light"] .ev-tip { box-shadow: inset 0 0 0 1px var(--line-3), 0 20px 40px #0000001f; }
.ev-tip.on { opacity: 1; }
.ev-tip p { margin-top: 8px; }
.ev-tip p.amber { color: var(--amber); }
.ev-tip-h { display: flex; gap: 8px; align-items: flex-start; color: var(--fg-1); }
.ev-tip-h b { font-weight: 500; line-height: 1.4; }
.ev-tip-h .ap-key { flex: none; }
.ev-tip-s { margin-top: 8px; display: flex; align-items: center; gap: 8px; color: var(--fg-2); }
.ev-tip-s b { color: var(--fg-1); font-weight: 500; }
.ev-tip-ms { margin-top: 10px; display: flex; flex-direction: column; }
.ev-tip-m { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line-2); color: var(--fg-2); }
.ev-tip-m > span:not(.ap-key) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 6px; }
.ev-tip-m small { grid-column: 2; color: var(--fg-3); font-size: 11.5px; }
.ev-tip-m.w > span:not(.ap-key) { color: var(--cu); }
.ev-tip-m .ai-mark { font-size: 12px; }
.ev-tip-q { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3); color: var(--fg-1); font-size: 12.5px; line-height: 1.55; }
.ev-tip-q small { display: block; font-size: 11.5px; color: var(--fg-3); margin-bottom: 3px; }
.ev-tip-q span { background: linear-gradient(color-mix(in srgb, var(--cu) 40%, transparent), color-mix(in srgb, var(--cu) 40%, transparent)) no-repeat 0 100% / 100% 1px; padding-bottom: 2px; }
.ev-tip-cc { margin-top: 10px; display: flex; gap: 8px; align-items: flex-start; color: var(--fg-2); }
.ev-tip-cc i { flex: none; width: 7px; height: 7px; margin-top: 6px; border-radius: 99px; background: var(--amber); }

.ev-wv-foot { margin-top: 26px; display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.ev-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; color: var(--fg-3); }
.ev-legend span { display: inline-flex; gap: 7px; align-items: center; }
.ev-sq { display: inline-block; width: 9px; height: 11px; border-radius: 2px; clip-path: polygon(0 0, 64% 0, 100% 26%, 100% 100%, 0 100%); box-shadow: inset 0 0 0 1px var(--line-3); flex: none; }
.ev-sq.s-up { box-shadow: inset 0 0 0 1px var(--fg-3); }
.ev-sq.s-pr { background: var(--bg-4); box-shadow: none; }
.ev-sq.s-tr { background: var(--cu-tint); box-shadow: inset 0 0 0 1px var(--cu); }
.ev-sq.s-mp { background: color-mix(in srgb, var(--ok) 72%, transparent); box-shadow: none; }
.ev-sq.s-nm { box-shadow: inset 0 0 0 1px var(--fg-4); }
.ev-sq.s-ro { background: repeating-linear-gradient(135deg, var(--fg-4) 0 1px, transparent 1px 3px); box-shadow: inset 0 0 0 1px var(--fg-4); }
.ev-sq.s-cp { box-shadow: inset 0 0 0 1.25px var(--red); }
.ev-gapbtn { margin-left: auto; appearance: none; border: 0; font: inherit; font-size: 13px; height: 32px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; color: var(--fg-1); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3); cursor: pointer; transition: background .2s; }
.ev-gapbtn i { width: 9px; height: 9px; border-radius: 2.5px; box-shadow: inset 0 0 0 1.25px var(--amber); }
.ev-gapbtn:hover, .ev-gapbtn[aria-pressed="true"] { background: var(--bg-4); }
.ev-gapbtn:focus-visible { outline: 2px solid var(--fg-2); outline-offset: 2px; }

/* ---------- the search wall ---------- */
.ev-sw-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ev-sw-in { flex: 1 1 340px; height: 42px; padding: 0 14px; border-radius: 10px; display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--bg-1) 70%, transparent); box-shadow: inset 0 0 0 1px var(--line); cursor: text; transition: box-shadow .3s; }
.ev-sw-in:focus-within { box-shadow: inset 0 0 0 1px var(--line-3); }
.ev-sw-in svg { width: 14px; height: 14px; flex: none; color: var(--fg-4); }
.ev-sw-in input { flex: 1; min-width: 0; appearance: none; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; color: var(--fg-1); }
.ev-sw-in input::placeholder { color: var(--fg-4); }
.ev-sw-in input::-webkit-search-cancel-button { display: none; }
.ev-sw-in .n { flex: none; color: var(--fg-4); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-chips, .ev-modes { display: flex; gap: 4px; flex-wrap: wrap; }
.ev-chip, .ev-mode { white-space: nowrap; flex: none; appearance: none; border: 0; font: inherit; font-size: 12.5px; height: 28px; padding: 0 11px; border-radius: 999px; color: var(--fg-3); background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: background .3s, color .3s, box-shadow .3s; }
.ev-chip:hover, .ev-mode:hover { color: var(--fg-1); }
.ev-chip[aria-pressed="true"] { color: var(--fg-1); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3); }
.ev-modes { padding: 2px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); gap: 0; }
.ev-mode { height: 24px; box-shadow: none; }
.ev-mode[aria-pressed="true"] { color: var(--fg-1); background: var(--bg-3); }
.ev-chip:focus-visible, .ev-mode:focus-visible { outline: 2px solid var(--fg-2); outline-offset: 1px; }

.ev-sw-body { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; }
.ev-wall { display: flex; flex-wrap: wrap; gap: 30px 18px; align-content: start; align-self: center; }
.ev-pf { position: relative; display: flex; gap: 3px; padding-bottom: 16px; min-width: 44px; }
/* only a file that holds the words carries its label */
.ev-pf-l { position: absolute; left: 0; bottom: 0; font-family: "Geist Mono", monospace; font-size: 10.5px; line-height: 1; color: var(--fg-3); white-space: nowrap; opacity: 0; transition: opacity .6s, color .6s; }
.ev-pf.lit .ev-pf-l { opacity: 1; }
.ev-pf.on .ev-pf-l { color: var(--fg-1); }
.ev-pg { position: relative; display: block; width: 22px; height: 29px; padding: 5px 4px; border-radius: 2px; background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 3.6px) content-box, var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-2); transition: opacity .6s, box-shadow .6s, transform .6s var(--ease-enter); cursor: default; }
.ev-pg.img { background: linear-gradient(var(--bg-3), var(--bg-3)) content-box, var(--bg-1); }
.ev-pg.img::after { content: ""; position: absolute; left: 6px; right: 6px; top: 9px; height: 7px; border-radius: 1px; box-shadow: inset 0 0 0 1px var(--line-3); }
.ev-pg.sheet { background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 4px) content-box, repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 5px) content-box, var(--bg-1); }
.ev-pg.code { background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 3.6px) content-box, var(--bg-1); padding-left: 7px; }
.ev-sw.q .ev-pg { opacity: .32; }
.ev-sw.q .ev-pg.hit { opacity: 1; box-shadow: inset 0 0 0 1px var(--fg-4); cursor: pointer; }
.ev-sw.q.noai .ev-pg.img { opacity: .4; background: repeating-linear-gradient(135deg, var(--line-3) 0 1px, transparent 1px 4px) content-box, var(--bg-1); }
.ev-sw.q.noai .ev-pg.img::after { display: none; }
/* the match line only: a soft copper mark, no glow */
.ev-pg .m { position: absolute; left: 3px; right: 3px; height: 2px; border-radius: 1px; background: var(--fg-2); animation: ev-in var(--dur-enter) var(--ease-spring) both; }
@keyframes ev-in { from { opacity: 0; transform: scaleX(.4); } }
.ev-pf.on .ev-pg.hit, .ev-pg.on { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--fg-2); opacity: 1; }

.ev-sw-side { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ev-res { min-height: 252px; max-height: 252px; overflow: auto; border-radius: 12px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); padding: 2px 0; font-size: 13px; scrollbar-width: thin; }
.ev-r { appearance: none; border: 0; background: none; font: inherit; width: 100%; height: 40px; padding: 0 14px; display: flex; align-items: center; gap: 10px; color: var(--fg-3); text-align: left; cursor: pointer; border-bottom: 1px solid var(--line-2); transition: background var(--dur-hover), color var(--dur-hover); animation: ev-in2 var(--dur-enter) var(--ease-spring) both; }
.ev-r .ap-key { opacity: .8; }
@keyframes ev-in2 { from { opacity: 0; transform: translateY(4px); } }
.ev-r .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-r .n { flex: none; min-width: 16px; text-align: right; font-size: 11.5px; color: var(--fg-4); font-variant-numeric: tabular-nums; }
.ev-r:hover, .ev-r.on { background: var(--bg-2); color: var(--fg-1); }
.ev-r.on .n { color: var(--fg-1); }
.ev-r:focus-visible { outline: 2px solid var(--fg-2); outline-offset: -2px; }
.ev-res-e { padding: 12px 14px; color: var(--fg-4); font-size: 12.5px; line-height: 1.5; }
.ev-sw-note { min-height: 18px; font-size: 12px; color: var(--fg-3); }
.ev-pv { min-height: 128px; }
.ev-pv-e { color: var(--fg-4); font-size: 12.5px; line-height: 1.5; }
.ev-pv-h { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--fg-3); margin-bottom: 8px; }
.ev-pv-h > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the passage, as a source excerpt; a search match is not an AI act, so its underline is grey */
.ev-pv-x { font-size: 14.5px; line-height: 1.6; }
.ev-pv-x mark { --u: var(--fg-3); }
.ev-pv-x em { font-style: normal; color: var(--fg-3); }
@media (prefers-reduced-motion: reduce) { .ev-pg, .ev-pg .m, .ev-r, .ev-pf-l { animation: none !important; transition: none !important; } }
/* search wall on a phone: 40px targets, labels 12px, reading text 15px */
@media (max-width: 860px) {
  .ev-sw-bar { gap: 10px; }
  .ev-sw-in { height: 44px; }
  .ev-sw-in input { font-size: 16px; align-self: stretch; }
  .ev-chips { gap: 6px; }
  .ev-chip { height: 40px; padding: 0 14px; font-size: 13px; }
  .ev-modes { padding: 0; }
  .ev-mode { height: 40px; padding: 0 16px; font-size: 13px; }
  .ev-sw-body { margin-top: 22px; }
  .ev-wall { gap: 10px 16px; align-self: start; }
  .ev-pf-l { font-size: 12px; }
  .ev-pf { padding-bottom: 18px; min-width: 52px; }
  .ev-pg::before { content: ""; position: absolute; inset: -4px -2px; }
  .ev-r { height: 44px; }
  .ev-r .ap-key, .ev-pv-h .ap-ev, .ev-pv-h .ap-ev .v { font-size: 12px; }
  .ev-r .n { font-size: 12px; }
  .ev-res-e, .ev-pv-e { font-size: 13px; }
  .ev-sw-note, .ev-pv-n { font-size: 12.5px; }
  .ev-pv { min-height: 0; }
}
.ev-pv-n { margin-top: 8px; display: flex; gap: 6px; align-items: center; color: var(--fg-3); font-size: 12px; }
.ev-pv-n .ai-mark { font-size: 12px; }

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .ev-wv-body { grid-template-columns: 300px minmax(80px, 1fr) auto; }
  .ev-rq-cells { width: calc(37 * 12px - 2px); gap: 2px; }
  .ev-c { width: 10px; height: 10px; }
}
@media (max-width: 1020px) {
  .ev-wv, .ev-sw { padding: 24px 20px 0; }
  .ev-wv-cap { margin: 24px -20px 0; padding: 20px 20px 24px; }
  .ev-wv-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 88px auto; }
  .ev-wv-files { grid-column: 1; grid-row: 1; }
  .ev-wv-reqs { grid-column: 1; grid-row: 3; }
  .ev-rq-cells { flex: 1; width: auto; min-width: 0; gap: 2px; }
  .ev-c { flex: 0 0 calc((100% - 72px) / 37); width: auto; height: auto; aspect-ratio: 1; min-width: 0; border-radius: 2px; }
  .ev-rq { height: auto; }
  .ev-rq-b { width: 40px; font-size: 11px; padding: 0 2px; }
  .ev-tip { width: min(320px, 100%); }
  .ev-tally { margin-left: 0; }
  .ev-sw-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ev-sw-side, .ev-chips, .ev-sw-in { min-width: 0; }
  .ev-sw-in { flex-basis: 100%; }
  .ev-res { min-height: 0; max-height: 200px; }
}
@media (max-width: 560px) {
  .ev-fgrid { gap: 3px 2px; }
  .ev-pg { width: 18px; height: 24px; padding: 4px 3px; }
  .ev-pg.img::after { left: 5px; right: 5px; top: 7px; height: 6px; }
  .ev-pg .m { left: 2px; right: 2px; height: 2px; }
  .ev-wall { gap: 6px 12px; }
  .ev-pf { gap: 3px; }
  .ev-gapbtn { margin-left: 0; }
  .ev-tally { font-size: 12px; gap: 2px 12px; }
}

/* ---------- phone: each scene shows its front window across the column, and its caption reads below the scene, not over it ---------- */
@media (max-width: 640px) {
  .stage2 { padding: 6px; border-radius: 16px; }
  .stage2-in { height: 500px; }
  .stage2-cap { position: static; max-width: none; padding: 18px 10px 10px; }
  .stage2-in > .win.back { display: none; }
  .stage2-in > .win:not(.back) { left: 10px !important; width: calc(100% - 20px) !important; top: 28px !important; }
  .ev-s1 .stage2-in { height: 660px; }
  .stage2-in > .win.ev-s1-files { top: 300px !important; height: 420px; }
  .ev-keys { top: -20px; }
  .win-bar { gap: 8px; padding: 0 12px; }
  .win-bar b, .win-bar .r { flex: none; white-space: nowrap; }
  .win-bar > span:not(.r):not(.ap-key):not(.as-crumb) { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .win-bar .ap-key, .win-bar .as-crumb { flex: none; }
  /* the weave: each requirement row is a 40px tap target */
  .ev-rq { min-height: 40px; }
  .ev-rq + .ev-rq { margin-top: 0; }
  .ev-rq-b { height: 40px; width: 44px; font-size: 12px; }
  .ev-gapbtn { height: 40px; }
  /* the original: one page, its bar on one line, the citation card below the passage */
  .ev-fan { top: 28px; width: calc(100% - 20px); }
  .ev-page.p2, .ev-page.p3, .ev-zoom { display: none; }
  .ev-page-bar { padding: 0 12px; gap: 8px; white-space: nowrap; }
  .ev-page-bar > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .ev-page-bar .ap-key, .ev-page-bar .r { flex: none; }
  .ev-pop { right: 10px; left: 10px; width: auto; top: 300px; }
  /* the four kinds of place: one at a time, at reading size */
  #ev-stage3 { height: 600px; }
  .ev-kinds { margin: 16px 12px; height: 300px; }
  .ev-kind .src-excerpt { padding: 14px; font-size: 14px; }
  .ev-kind .ev-code p { font-size: 12px; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; }
  .ev-tr { grid-template-columns: 18px 1.4fr .7fr; padding: 0 12px; gap: 8px; font-size: 12.5px; }
  .ev-tr > :nth-child(4) { display: none; }
  .ev-shot { grid-template-columns: 30px minmax(0, 1fr); font-size: 13px; }
  .ev-shot-nav { padding: 12px 8px; }
  .ev-shot-main { padding: 14px; }
  .ev-int p { grid-template-columns: 16px minmax(0, 1fr); }
  .ev-int b { grid-column: 2; }
  .ev-int mark, .ev-int span { grid-column: 2; }
  .ev-ktabs { bottom: auto; top: 372px; font-size: 12px; max-width: calc(100% - 20px); }
  .ev-ktabs span { padding: 0 9px; }
  .ev-pop { top: 424px; }
  /* replace a version: the stack, then the affected work, names under their ids */
}

/* ===== version history: one file across versions, citations pinned to the version they cite ===== */
.ev-vh { margin: 56px 0 40px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); font-size: 13px; color: var(--fg-2); }
.ev-vh-bar { height: 52px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-2); }
.ev-vh-bar b { color: var(--fg-1); font-weight: 520; }
.ev-vh-tabs { position: relative; margin-left: auto; display: grid; grid-template-columns: repeat(3, 92px); height: 34px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-3); }
.ev-vh-tabs span { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: "Geist Mono", monospace; font-size: 12px; color: var(--fg-3); transition: color .3s; }
.ev-vh-tabs span small { font-family: Geist, sans-serif; font-size: 11px; color: var(--fg-4); }
.ev-vh-tabs span.on { color: var(--fg-1); }
.ev-vh-tabs i { position: absolute; top: 3px; bottom: 3px; left: 3px; width: 86px; border-radius: 6px; background: var(--bg-3); transform: translateX(calc(var(--v, 1) * 92px - 92px)); transition: transform .6s var(--ease-out); }
.ev-vh-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; }
.ev-vh-page { position: relative; margin: 24px 24px 24px 0; padding: 14px 0 14px 56px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #d9dbe0; color: #1b1c1f; font: 13px/1.9 "Geist Mono", monospace; }
.ev-vh-ln { display: flex; gap: 14px; padding-right: 16px; transition: background .4s, opacity .4s; }
.ev-vh-ln i { width: 22px; margin-left: -34px; text-align: right; font-style: normal; color: #a0a4ab; }
.ev-vh-ln s { color: #a0a4ab; margin-right: 8px; }
.ev-vh-ln b { font-weight: 500; }
.ev-vh-ln em { font-style: normal; }
.ev-vh-ln [data-v] { display: none; }
.ev-vh-ln.n { display: none; }
.ev-vh[data-v="3"] .ev-vh-ln.n { display: flex; background: #f4f5f7; }
.ev-vh[data-v="3"] .ev-vh-ln.x { background: #f4f5f7; }
.ev-vh-pin { position: absolute; left: 10px; top: calc(14px + (var(--a) - 1) * 24.7px); height: calc((var(--b) - var(--a)) * 24.7px); width: 3px; border-radius: 2px; background: #1b1c1f; transition: height .6s var(--ease-out); }
.ev-vh[data-v="1"] .ev-vh-pin { opacity: 0; }
.ev-vh-pin span { display: none; position: absolute; left: -2px; top: -22px; font: 10.5px "Geist Mono", monospace; color: #6b6f76; }
.ev-vh.sug .ev-vh-pin { background: var(--cu); height: calc((var(--b) - var(--a) + 1) * 24.7px); }
.ev-vh.acc .ev-vh-pin { background: #1b1c1f; }
.ev-vh-side { border-left: 1px solid var(--line-2); padding: 18px 0 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.ev-vh-h { display: flex; justify-content: space-between; color: var(--fg-3); font-size: 12px; padding: 0 0 8px; }
.ev-vh-r { height: 40px; display: grid; grid-template-columns: 14px auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 10px; }
.ev-vh-r .t { color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-vh-r .s { grid-column: 3; font-size: 11.5px; color: var(--fg-3); }
.ev-vh-r .ev-vh-i, .ev-vh-r .ap-key { grid-row: 1 / span 2; }
.ev-vh-i { width: 12px; height: 12px; border-radius: 999px; background: var(--fg-2); transition: background .3s, box-shadow .3s; }
.ev-vh[data-v="3"]:not(.acc) .ev-vh-r:first-of-type .ev-vh-i { background: none; box-shadow: inset 0 0 0 1.4px var(--fg-2); }
.ev-vh-sug { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s var(--ease-out); }
.ev-vh.sug .ev-vh-sug { opacity: 1; transform: none; }
.ev-vh-sl { display: inline-flex; align-items: center; gap: 6px; color: var(--cu); --ai-mark-h: 13px; }
.ev-vh-sug > span:nth-child(2) { color: var(--fg-1); background: linear-gradient(var(--cu), var(--cu)) no-repeat 0 100% / 100% 1.5px; padding-bottom: 1px; }
.ev-vh-sug .ap-btn { margin-left: auto; }
.ev-vh-stamp { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); align-items: center; gap: 8px; color: var(--fg-3); }
.ev-vh-stamp b { color: var(--fg-1); font-weight: 500; }
.ev-vh.acc .ev-vh-sug { display: none; }
.ev-vh.acc .ev-vh-stamp { display: flex; }
@media (max-width: 900px) { .ev-vh-body { grid-template-columns: 1fr; } .ev-vh-page { margin: 18px 0; } .ev-vh-side { border-left: 0; padding-left: 0; } .ev-vh-bar > b { display: none; } .ev-vh-tabs { grid-template-columns: repeat(3, 76px); } .ev-vh-tabs i { width: 70px; transform: translateX(calc(var(--v, 1) * 76px - 76px)); } .ev-vh-tabs small { display: none !important; } }

/* ===== mini product surfaces (from v1, in product words) ===== */
.ev-box { width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1.25px var(--fg-4); display: grid; place-items: center; color: transparent; transition: background .25s, box-shadow .25s, color .25s; }
.ev-box svg { width: 11px; height: 11px; }
.ev-seal { display: flex; align-items: center; gap: 28px; justify-content: center; }
.ev-seal-box { position: relative; width: 132px; height: 132px; border-radius: 28px; display: grid; place-items: center; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3); }
.ev-seal-file { width: 40px; height: 48px; color: var(--fg-2); }
.ev-seal-file svg { width: 100%; height: 100%; }
.ev-ring { position: absolute; inset: 14px; border-radius: 20px; border: 1px dashed var(--fg-4); animation: ev-breathe 4s ease-in-out infinite; }
.ev-ring.r2 { inset: -10px; border-radius: 36px; border-style: solid; border-color: var(--line); animation-delay: -2s; }
@keyframes ev-breathe { 50% { transform: scale(1.04); opacity: .55; } }
.ev-seal-rows { display: flex; flex-direction: column; gap: 10px; font-size: 13px; min-width: 190px; }
.ev-seal-rows div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); color: var(--fg-3); }
.ev-seal-rows b { font-weight: 500; color: var(--fg-1); }
.ev-batch { border-radius: 14px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3), 0 20px 40px #0000004d; overflow: hidden; font-size: 13px; }
.ev-b-row { height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-2); color: var(--fg-2); transition: background .3s, opacity .4s; }
.ev-b-row .ev-box { flex: none; }
.ev-b-row.on .ev-box { background: var(--fg-1); box-shadow: none; color: var(--bg); }
.ev-b-row .r { margin-left: auto; color: var(--fg-3); font-size: 12px; }
.ev-b-row.flag { color: var(--fg-4); }
.ev-b-row.flag .r { color: var(--amber); }
.ev-b-row.gone { opacity: .35; }
.ev-b-bar { height: 48px; padding: 0 14px; display: flex; align-items: center; gap: 10px; color: var(--fg-3); background: var(--bg-2); }
.ev-b-bar .ap-btn { margin-left: auto; }
@media (max-width: 640px) { .ev-seal { flex-direction: column; } }
.ev-dsug { background: linear-gradient(var(--cu), var(--cu)) no-repeat 0 100% / 100% 1px; }
#ev-deck .who { display: flex; align-items: center; gap: 6px; color: var(--cu); }
@keyframes ev-breathe { 50% { transform: scale(1.04); opacity: .55; } }

/* ===== invention: drop a file, watch it read (prefix ev-drop) =====
   The visitor drags a client file into Enpasse. A reading line passes down the white page; each passage it cites lifts
   off as a suggestion with the orb and a copper underline, wired back to its lines, until a person accepts it. */
.ev-drop { margin-top: 72px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease-spring), transform var(--dur-reveal) var(--ease-spring); }
.ev-drop.seen { opacity: 1; transform: none; }
.ev-drop-tray { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.ev-drop-l { font-size: 12px; color: var(--fg-3); margin-bottom: 4px; }
.ev-drop-f { appearance: none; border: 0; font: inherit; text-align: left; cursor: grab; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3); color: var(--fg-1); touch-action: none; transition: background var(--dur-hover), box-shadow var(--dur-hover), opacity var(--dur-enter), transform var(--dur-enter) var(--ease-spring); }
.ev-drop-f b { display: block; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
.ev-drop-f small { display: block; margin-top: 2px; font-size: 12px; color: var(--fg-3); }
.ev-drop-f.used { opacity: .4; }
.ev-drop-f.lift { opacity: 0; }
.ev-drop-f:focus-visible { outline: 2px solid var(--fg-3); outline-offset: 2px; }
@media (any-hover: hover) { .ev-drop-f:hover { background: var(--bg-2); } }
.ev-drop-ic { width: 26px; height: 32px; flex: none; border-radius: 4px; position: relative; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-3); }
.ev-drop-ic::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--fg-3); box-shadow: 0 -5px 0 var(--fg-4), 0 -10px 0 var(--fg-4); }
.ev-drop-ic.x::before, .ev-drop-ic.p::before, .ev-drop-ic.d::before { position: absolute; left: 4px; top: 4px; font: 600 7.5px/1 "Geist Mono", monospace; color: var(--fg-2); }
.ev-drop-ic.x::before { content: "XLS"; } .ev-drop-ic.p::before { content: "PDF"; } .ev-drop-ic.d::before { content: "DOC"; }
.ev-drop-hint { margin-top: 8px; font-size: 12.5px; color: var(--fg-3); }
.ev-drop-ghost { position: fixed; z-index: 60; pointer-events: none; margin: 0; cursor: grabbing; box-shadow: inset 0 0 0 1px var(--line-3), 0 18px 40px #0007; background: var(--bg-2); transform: rotate(-2deg); }
.ev-drop-win { position: relative; height: 600px; border-radius: 14px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3), 0 30px 80px #00000040; overflow: hidden; display: flex; flex-direction: column; font-size: 13px; transition: box-shadow var(--dur-hover); }
:root[data-theme="light"] .ev-drop-win { box-shadow: inset 0 0 0 1px var(--line-3), 0 20px 60px #0000000f; }
.ev-drop-win.over { box-shadow: inset 0 0 0 1px var(--fg-2), 0 30px 80px #00000040; }
.ev-drop-bar { height: 44px; flex: none; padding: 0 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-2); color: var(--fg-3); font-size: 12.5px; }
.ev-drop-bar b { color: var(--fg-1); font-weight: 500; }
.ev-drop-bar .r { margin-left: auto; }
.ev-drop-st { height: 22px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; box-shadow: inset 0 0 0 1px var(--line-3); font-size: 12px; color: var(--fg-2); --ai-mark-h: 12px; }
.ev-drop-st[data-s="read"] { color: var(--cu); background: var(--cu-tint); box-shadow: inset 0 0 0 1px var(--cu-line); }
.ev-drop-body { position: relative; flex: 1; min-height: 0; }
.ev-drop-zone { position: absolute; inset: 24px; border-radius: 12px; border: 1px dashed var(--line-3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--fg-3); font-size: 12.5px; transition: opacity var(--dur-enter), transform var(--dur-enter) var(--ease-spring), border-color var(--dur-hover), background var(--dur-hover); }
.ev-drop-zone svg { width: 22px; height: 22px; color: var(--fg-2); margin-bottom: 6px; }
.ev-drop-zone b { color: var(--fg-1); font-weight: 500; font-size: 14px; }
.ev-drop-win.over .ev-drop-zone { border-color: var(--fg-2); background: var(--bg-2); }
.ev-drop-win.reading .ev-drop-zone { opacity: 0; transform: scale(.97); pointer-events: none; }
.ev-drop-read { position: absolute; inset: 0; padding: 24px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; opacity: 0; transition: opacity var(--dur-enter); pointer-events: none; }
.ev-drop-win.reading .ev-drop-read { opacity: 1; pointer-events: auto; }
.ev-drop-page { position: relative; align-self: start; overflow: hidden; transform: translateY(10px); opacity: 0; transition: opacity var(--dur-enter) var(--ease-spring), transform var(--dur-enter) var(--ease-spring); }
.ev-drop-win.reading .ev-drop-page { transform: none; opacity: 1; }
.ev-drop-page h5 { margin: 2px 0 8px; font-size: 13.5px; font-weight: 600; }
.ev-drop-page p { color: var(--fg-2); }
.ev-drop-page mark { color: var(--fg-2); }
.ev-drop-page mark.on { color: var(--fg-1); }
.ev-drop-page mark.on { background-size: 100% 1px; }
.ev-drop-page mark.ok { background-size: 0% 1px; }
.ev-drop-scan { position: absolute; left: 0; right: 0; height: 28px; top: 0; pointer-events: none; background: linear-gradient(to bottom, transparent, #0000000a 70%, #00000024 100%); border-bottom: 1px solid #00000033; opacity: 0; transition: opacity var(--dur-enter); }
.ev-drop-page.scan .ev-drop-scan { opacity: 1; }
.ev-drop-tr { display: grid; grid-template-columns: 22px 0.7fr 1fr 1fr 0.95fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-2); font-size: 12px; align-items: baseline; }
.ev-drop-tr i { font-style: normal; font-family: "Geist Mono", monospace; font-size: 10.5px; color: var(--fg-4); }
.ev-drop-tr.h { color: var(--fg-3); font-size: 11.5px; }
.ev-drop-tr:last-child { border-bottom: 0; }
.ev-drop-sugs { display: flex; flex-direction: column; gap: 10px; align-self: start; }
.ev-drop-sug { position: relative; padding: 12px 14px; border-radius: 10px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--cu-line); opacity: 0; transform: translateX(-14px); filter: blur(3px); transition: opacity var(--dur-reveal) var(--ease-spring), transform var(--dur-reveal) var(--ease-spring), filter var(--dur-reveal) var(--ease-spring), box-shadow var(--dur-enter); }
.ev-drop-sug.on { opacity: 1; transform: none; filter: none; }
.ev-drop-sug.ok { box-shadow: inset 0 0 0 1px var(--line-3); }
.ev-drop-sug.no { opacity: .4; }
.ev-drop-sug-h { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ev-drop-sug-h .r { margin-left: auto; color: var(--fg-3); font-family: "Geist Mono", monospace; font-size: 11px; }
.ev-drop-sug p { margin-top: 8px; color: var(--fg-1); font-size: 13px; line-height: 1.45; }
.ev-drop-sug .acts { margin-top: 10px; display: flex; gap: 6px; justify-content: flex-end; align-items: center; min-height: 28px; }
.ev-drop-sug .acts button { appearance: none; border: 0; font: inherit; cursor: pointer; }
.ev-drop-sug .who { display: none; align-items: center; gap: 8px; margin-right: auto; color: var(--fg-3); font-size: 12px; }
.ev-drop-sug .who b { color: var(--fg-1); font-weight: 500; }
.ev-drop-sug.ok .who { display: inline-flex; }
.ev-drop-sug.ok .sugg-by, .ev-drop-sug.ok .acts button, .ev-drop-sug.no .acts button { display: none; }
.ev-drop-sug .done-t { display: none; font-size: 12px; color: var(--fg-3); }
.ev-drop-sug.ok .done-t { display: inline; color: var(--fg-1); }
.ev-drop-sug.no .nr { display: inline; }
.ev-drop-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ev-drop-wires path { fill: none; stroke: var(--cu); stroke-width: 1.2; stroke-linecap: round; opacity: .75; transition: stroke var(--dur-enter), opacity var(--dur-enter); }
.ev-drop-wires path.ok { stroke: var(--fg-4); opacity: .6; }
.ev-drop-wires path.no { opacity: 0; }
.ev-drop-cap { grid-column: 2; margin-top: 8px; }
.ev-drop-cap h3 { font-size: 15px; font-weight: 500; }
.ev-drop-cap p { margin-top: 4px; color: var(--fg-3); font-size: 15px; }
.ev-drop-mr { background: #3b4a5c !important; color: #eef3f8 !important; }
:root[data-theme="light"] .ev-drop-mr { background: #dfe6ee !important; color: #23303d !important; }
@media (max-width: 1100px) { .ev-drop { grid-template-columns: 240px minmax(0, 1fr); } .ev-drop-f b { max-width: 160px; } .ev-drop-read { gap: 28px; } }
@media (max-width: 900px) {
  .ev-drop { grid-template-columns: 1fr; }
  .ev-drop-cap { grid-column: 1; }
  .ev-drop-tray { display: grid; grid-template-columns: 1fr; }
  .ev-drop-win { height: auto; min-height: 420px; }
  .ev-drop-body { min-height: 360px; }
  .ev-drop-win.reading .ev-drop-read { position: relative; }
  .ev-drop-read { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .ev-drop-wires { display: none; }
  .ev-drop-f b { max-width: none; }
}
@media (max-width: 640px) { .ev-drop-bar > span:not(.r) { display: none; } .ev-drop { margin-top: 48px; } .ev-drop-tr { grid-template-columns: 18px 0.6fr 1fr 1fr; } .ev-drop-tr > :nth-child(4) { display: none; } }
@media (prefers-reduced-motion: reduce) { .ev-drop, .ev-drop *, .ev-drop-sug { transition: none !important; } .ev-drop-sug { filter: none; } }

/* ===== invention: point at a requirement, its files rise (prefix ev-stk) =====
   A real pile of the client's files, lying in perspective. Pointing at a sub-requirement lifts the files that support
   it out of the pile, turned to face you and open at the cited place. A sub-requirement with no file lifts nothing:
   the pile dims and the drafted request (Enpasse's suggestion, so copper and the orb) rises instead. */
.ev-stk { margin-top: 64px; border-radius: 14px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3), 0 30px 80px #00000040; overflow: hidden; font-size: 13px; color: var(--fg-2); opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease-spring), transform var(--dur-reveal) var(--ease-spring); }
.ev-stk.seen { opacity: 1; transform: none; }
:root[data-theme="light"] .ev-stk { box-shadow: inset 0 0 0 1px var(--line-3), 0 20px 60px #0000000f; }
.ev-stk-bar { height: 44px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-2); color: var(--fg-3); font-size: 12.5px; }
.ev-stk-bar b { color: var(--fg-1); font-weight: 500; }
.ev-stk-bar .r { margin-left: auto; }
.ev-stk-body { display: grid; grid-template-columns: 380px minmax(0, 1fr); min-height: 560px; }
.ev-stk-list { list-style: none; margin: 0; padding: 8px; border-right: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 2px; }
.ev-stk-list li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 10px; border-radius: 8px; cursor: pointer; outline: none; transition: background var(--dur-hover); }
.ev-stk-list li .k { font-family: "Geist Mono", monospace; font-size: 11.5px; color: var(--fg-3); }
.ev-stk-list li .t { color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-stk-list li .c { font-size: 12px; color: var(--fg-3); white-space: nowrap; }
.ev-stk-list li .c.none { color: var(--amber); }
.ev-stk-list li.cur { background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-3); }
.ev-stk-list li:focus-visible { box-shadow: inset 0 0 0 1px var(--fg-3); }
@media (any-hover: hover) { .ev-stk-list li:hover:not(.cur) { background: var(--bg-2); } }
.ev-stk-pile { position: relative; overflow: hidden; perspective: 1500px; perspective-origin: 50% 30%; background: radial-gradient(70% 80% at 50% 10%, #18191a 0%, var(--bg-1) 70%); }
:root[data-theme="light"] .ev-stk-pile { background: radial-gradient(70% 80% at 50% 10%, #fff 0%, var(--bg-1) 70%); }
.ev-stk-s { --tx: 0px; --ty: 0px; --tz: 0px; --rx: 58deg; --rz: -32deg; --lz: 0px; position: absolute; left: 50%; top: 58%; width: 320px; transform: translate(-50%, -50%) translate3d(var(--tx), var(--ty), var(--tz)) rotateX(var(--rx)) rotateZ(var(--rz)) translateZ(var(--lz)); transition: transform var(--dur-swap) var(--ease-swap), opacity var(--dur-swap) var(--ease-swap), box-shadow var(--dur-swap); padding: 12px 14px 14px; font-size: 12px; line-height: 1.6; backface-visibility: hidden; }
.ev-stk-s.src-excerpt { box-shadow: inset 0 0 0 1px #00000024, 0 1px 0 #0000001a; }
.ev-stk-s.up { box-shadow: inset 0 0 0 1px #00000024, 0 30px 60px #00000059; }
.ev-stk-s .src-excerpt-h { margin: -12px -14px 8px; }
.ev-stk-s p { color: var(--fg-2); }
.ev-stk-s .hl { color: var(--fg-1); background: #0000000f; box-shadow: -6px 0 0 #0000000f, 6px 0 0 #0000000f; border-radius: 2px; }
.ev-stk-s.mono p { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; white-space: pre; }
.ev-stk-pile.dim .ev-stk-s:not(.up) { opacity: .45; }
.ev-stk-req { position: absolute; left: 50%; top: 40%; width: 340px; transform: translate(-50%, -50%) translate3d(0, 30px, 0) scale(.96); opacity: 0; border-radius: 10px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--cu-line), 0 30px 60px #00000066; padding: 14px 16px; transition: transform var(--dur-swap) var(--ease-swap), opacity var(--dur-swap) var(--ease-swap); }
.ev-stk-req.up { transform: translate(-50%, -50%); opacity: 1; }
.ev-stk-req .h { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ev-stk-req p { margin-top: 10px; color: var(--fg-1); line-height: 1.5; }
.ev-stk-req .f { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; color: var(--fg-3); font-size: 12px; }
.ev-stk-cap { margin-top: 24px; }
@media (max-width: 900px) {
  .ev-stk-body { grid-template-columns: 1fr; }
  .ev-stk-list { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .ev-stk-pile { min-height: 460px; }
}
@media (max-width: 640px) {
  .ev-stk { margin-top: 40px; }
  .ev-stk-bar > span:not(.r) { display: none; }
  .ev-stk-s { width: 250px; font-size: 11px; }
  .ev-stk-req { width: 290px; }
  .ev-stk-pile { min-height: 440px; }
}
@media (prefers-reduced-motion: reduce) { .ev-stk, .ev-stk-s, .ev-stk-req { transition: none !important; } }
.ev-stk-s { width: 360px; top: 64%; }
.ev-stk-pile { --dimb: .5; }
:root[data-theme="light"] .ev-stk-pile { --dimb: .9; }
.ev-stk-pile.dim .ev-stk-s:not(.up) { opacity: 1; filter: brightness(var(--dimb)); }
.ev-stk-req { top: 30%; transform: translate(-50%, -50%) translate3d(0, 30px, 260px) scale(.96); }
.ev-stk-req.up { transform: translate(-50%, -50%) translate3d(0, 0, 260px); }
@media (max-width: 640px) { .ev-stk-s { width: 260px; } }

/* ---------- best-of (25 Oct): three cells in one row, one cell laid across; records folded in from the retired page ---------- */
.fgrid.ev-f3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fgrid.ev-f3 > .cell { border-bottom: 0; border-right: 1px solid var(--line); }
.fgrid.ev-f3 > .cell:last-child { border-right: 0; }
.fgrid.ev-f3 .cell-viz .comp, .fgrid.ev-f3 .cell-viz .deck { width: 88%; }
.fgrid.ev-f1 { grid-template-columns: 1fr; }
.fgrid.ev-f1 > .cell { flex-direction: row; align-items: center; min-height: 380px; border: 0 !important; }
.fgrid.ev-f1 > .cell .cell-viz { flex: 1.25; }
.fgrid.ev-f1 > .cell .cell-cap { flex: 1; padding: 32px; }
.fw-in { margin: 56px auto 0; padding: 0; }
@media (max-width: 1100px) { .fgrid.ev-f3 { grid-template-columns: 1fr; } .fgrid.ev-f3 > .cell { border-right: 0; border-bottom: 1px solid var(--line); } .fgrid.ev-f3 > .cell:last-child { border-bottom: 0; } }
@media (max-width: 900px) { .fgrid.ev-f1 > .cell { flex-direction: column; align-items: stretch; } .fgrid.ev-f1 > .cell .cell-cap { padding: 0 24px 28px; } .fw-in { margin-top: 40px; } }