/* ── v2 additions: assessment card/form styling ──────────────────── */
.av2-card {
position: relative;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--r-xl);
box-shadow: var(--shadow-lg);
max-width: 720px;
margin-inline: auto;
}
.av2-card-bar {
/* .av2-card itself used to carry `overflow: hidden` purely so this
flush, square-cornered strip didn't poke past the card's rounded
top corners. That also silently clipped anything else in the card
that needed to render outside its box -- specifically the
type-ahead suggestions dropdown (.av3-suggestions) on fields like
Skills/Talents/Sports and Exams Attempted, which sits well inside
the card visually but is CSS-positioned absolute and can extend
past the card's own edge. With overflow:hidden on the ancestor,
that dropdown got hard-clipped a few rows in with no way to reach
the rest, even though the dropdown itself scrolls fine on its own
(main_v2_additions.css .av3-suggestions).
A first attempt rounded this element's OWN top corners to match
the card's radius, but that still overflowed: this element is only
6px tall, and a border-radius far larger than an element's own
height gets clamped down by the browser to fit that height -- so
its actual rendered curve was nowhere near the card's much wider
32px sweep, leaving a square corner poking past the card's true
rounded edge (visible in practice, not just in theory).
Fix: take this element out of flow, size ITS OWN box to exactly
the card's rounded-corner region (height: the same r-xl radius)
with matching radius + overflow:hidden, and paint the actual thin
gradient strip as a ::before inside that clipped box. At y = r-xl
the card's rounding has already fully resolved back to full
width, so this clip region never reaches (and never re-clips)
anything below it, including .av3-suggestions further down the
card. */
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--r-xl);
border-radius: var(--r-xl) var(--r-xl) 0 0;
overflow: hidden;
pointer-events: none;
}
.av2-card-bar::before {
content: "";
display: block;
height: 6px;
background: linear-gradient(90deg, var(--clr-mint), var(--clr-navy));
}
.av2-card-inner {
padding: var(--sp-10) var(--sp-8);
}
.av2-lead-title {
max-width: 100%;
}
.av2-form {
display: flex;
flex-direction: column;
gap: var(--sp-6);
margin-top: var(--sp-6);
}
.av2-field-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.av2-label {
font-size: var(--fs-sm);
font-weight: 600;
color: var(--txt-secondary);
}
.av2-label-row {
display: flex;
align-items: center;
gap: 6px;
}
/* A small "?" icon next to a field's label -- click or hover reveals a
short helper tip in a popover instead of a permanent line under the
field, so a form with several hinted fields doesn't get visually
noisier just because they have a note attached. */
.av2-help-wrap {
position: relative;
display: inline-flex;
line-height: 0;
}
.av2-help-icon {
display: block;
width: 14px;
height: 14px;
padding: 0;
border: none;
background-color: var(--clr-mint);
cursor: pointer;
/* Same question-mark-circle glyph this form already uses elsewhere,
as an inline SVG mask so it tints mint automatically and needs no
extra image asset or icon font. */
-webkit-mask-image: url("data:image/svg+xml;utf8, beside
a growing numeric