/* Assess: a row of sub-requirement panels; the centre one is live, the outer ones fall away into the page. */
.va { height: 460px; }
.va-row { position: absolute; inset: 0 calc(-1 * var(--outer)); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 76%, transparent 100%), linear-gradient(#000 0, #000 62%, transparent 96%); mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 76%, transparent 100%), linear-gradient(#000 0, #000 62%, transparent 96%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.va-track { position: absolute; top: 24px; left: 50%; display: flex; gap: 16px; transition: transform var(--dur-swap) var(--ease-swap); }
.va-p { width: 500px; flex: none; height: 380px; border-radius: 16px; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; font-size: 13px; transition: opacity var(--dur-swap) var(--ease-swap), filter var(--dur-swap) var(--ease-swap); opacity: .55; filter: saturate(.6); }
.va-p.focus { opacity: 1; filter: none; }
.va-p::before { content: ""; position: absolute; inset: 1px; border-radius: inherit; z-index: -1; background: linear-gradient(#ffffff05, #ffffff05), var(--panel); box-shadow: 0 4px 32px color-mix(in srgb, var(--bg) 60%, transparent); }
.va-p::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--line-3); }
.va-p.focus::after { background: radial-gradient(60% 40% at 100% 0, #ffffff0c, transparent 70%); }
:root[data-theme="light"] .va-p::before { background: #fff; box-shadow: 0 12px 40px #00000012; }

.va-h { height: 52px; padding: 0 18px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-2); }
.va-h b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.va-h .r { margin-left: auto; display: flex; gap: 12px; color: var(--fg-4); }
.va-h .r svg { width: 13px; height: 13px; }
.va-b { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; }
.va-ask { color: var(--fg-3); font-size: 12.5px; line-height: 1.5; }
.va-meta { display: flex; align-items: center; gap: 8px; color: var(--fg-3); font-size: 12px; }
.va-meta svg { width: 12px; height: 12px; }
.va-meta .r { margin-left: auto; }
.va-res { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 16px; font-weight: 560; letter-spacing: -0.012em; color: var(--fg-1); }
.va-q { font-size: 13px; font-weight: 400; color: var(--fg-3); letter-spacing: 0; }
.va-list { border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-3); overflow: hidden; background: var(--bg); }
.va-li { height: 38px; padding: 0 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-2); }
.va-li:last-child { border-bottom: 0; }
.va-li span:nth-child(2) { color: var(--fg-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.va-li .r { margin-left: auto; color: var(--fg-3); font-size: 12px; white-space: nowrap; }
.va-enter { opacity: 0; transform: translateY(10px); filter: blur(2px); transition: opacity var(--dur-enter) var(--ease-spring), transform var(--dur-enter) var(--ease-spring), filter var(--dur-enter) var(--ease-spring); }
.va-enter.in { opacity: 1; transform: none; filter: none; }
.va-f { margin-top: auto; padding: 12px 18px; border-top: 1px solid var(--line-2); display: flex; align-items: center; gap: 10px; min-height: 56px; }
.va-f .who { color: var(--fg-2); }
.va-f .r { margin-left: auto; display: flex; gap: 8px; }
.va-done { display: flex; align-items: center; gap: 8px; color: var(--fg-1); }
.va-done svg { width: 14px; height: 14px; color: var(--ok); }
.va-done time { color: var(--fg-3); font-size: 12px; margin-left: 4px; }
.va-note { padding: 10px 12px; border-radius: 10px; background: var(--bg-2); color: var(--fg-2); line-height: 1.5; box-shadow: inset 0 0 0 1px var(--line-2); }
.va-note b { font-weight: 560; color: var(--fg-1); }
.va-note small { display: block; color: var(--fg-3); margin-top: 4px; }
@media (max-width: 640px) { .va { height: 460px; } .va-p { width: 320px; } .va-li .r { display: none; } }