, no ARIA/markup-role change (the card carries
role="button"/aria-pressed, see candidate-card.js). Card-only class -
candidate-card.js is its sole emitter - so no .candidate-card scoping needed. */
.candidate-card__select-indicator {
flex-shrink: 0;
width: var(--candidate-control-glyph);
height: var(--candidate-control-glyph);
/* Gap + right-inset math kept from the matched-pair layout: pull the 20px mark
back over the bookmark button's 12px of invisible right padding so the two
sit an even --space-2 apart, and give it the same per-side breathing room
the bookmark glyph has so both align inside the card's --space-4 padding.
Derived from the two sizes, not hardcoded, so they stay correct if either
changes. */
margin-left: calc(var(--space-2) - (44px - var(--candidate-control-glyph)) / 2);
margin-right: calc((44px - var(--candidate-control-glyph)) / 2);
display: inline-flex;
align-items: center;
justify-content: center;
/* Same rest tint as the bookmark (.btn-icon uses --icon-default), so the
unselected pair is one colour + one size + one weight. */
color: var(--icon-default);
transition: color var(--duration-fast) var(--ease-out);
}
.candidate-card__select-indicator svg {
width: var(--candidate-control-glyph);
height: var(--candidate-control-glyph);
}
/* Two stacked glyphs: `square` (first) shown unselected, `check-square-fill`
(second) hidden until selected. */
.candidate-card__select-indicator svg:last-child {
display: none;
}
/* Hover cue: hovering anywhere on the card previews the accent tint on the
square, signalling the whole card is the select target (matches the
click/keydown handling in candidate-card.js, unchanged). */
.candidate-card:hover .candidate-card__select-indicator {
color: var(--accent);
}
/* Selected: swap the outline square for the filled check-square, in accent. */
.candidate-card.is-selected .candidate-card__select-indicator {
color: var(--accent);
}
.candidate-card.is-selected .candidate-card__select-indicator svg:first-child {
display: none;
}
.candidate-card.is-selected .candidate-card__select-indicator svg:last-child {
display: block;
}
/* Content column (design.md §9 Candidate row "Body"): everything beside the
avatar. It now holds exactly TWO children - the two-column
.candidate-card__main and the action footer beneath it (components.md §23).
The two top lines inside the left column (__meta-row, __identity-line) carry a
right gutter to clear the absolute top-right control cluster (below). */
.candidate-card__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
/* ---- The two-column split (components.md §23) --------------------------------
Left: identity + facts + classifications + skills. Right: the career summary
aside. The FOOTER is deliberately not in here - it is a sibling below, so the
buttons align to the card's left edge and are never pushed around by the
summary card's height. */
.candidate-card__main {
display: flex;
flex-direction: row;
/* flex-start, not center: the summary aside must top-align with the left
column's first line (design.md §9 / components.md §23). It was `center`
only because the aside carried a 44px top offset to duck under the
absolute .candidate-card__top-right cluster; that clearance is now
horizontal (margin-right on __summary), so both columns start at the
same y. */
align-items: flex-start;
gap: var(--space-6);
}
/* `min-width: 0` is load-bearing, not defensive boilerplate: without it this
flex child refuses to shrink below the intrinsic width of its longest
unbreakable content (a long location or skill chip), which would let the left
column push the summary aside off the card entirely. */
.candidate-card__col {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
/* ---- Career summary aside (components.md §23) --------------------------------
The candidate's own one-line pitch, on a FAINT surface card at the
right-middle of the row. It used to sit in-flow under the name as a
full-width icon + text row, which pushed the facts, classifications and skills -
the things an employer scans a result list for - progressively down the card.
`flex: 0 1 clamp(...)` rather than a fixed width or a bare percentage: the
basis tracks the card width so it stays proportionate on a wide viewport, the
clamp stops it collapsing to an unreadable ribbon or ballooning past the data
it supports, and `flex-shrink: 1` lets it give way first when the left column
needs the room.
Colours are TOKENS, never literals (design.md §1.5) - the "faint" reading has
to survive the dark-mode swap, which a hardcoded near-white would not.
--bg-surface is the right one: the card row itself is flat on the page canvas
(--bg-base), so the surface step reads as a quiet inset panel against it, and
in dark mode the pair resolves to #111111 / #191919 which holds the same
relationship.
⚠️ line-height is a LITERAL 1.6, not a token, because the design system does
not define line-height tokens (tokens.css has none - the previous inline
`var(--line-height-relaxed)` on this text resolved to nothing and silently did
no work). Do not "restore" that variable without adding it to tokens.css. */
.candidate-card__summary {
/* +50% over the original clamp(200px, 28%, 320px) per user request. */
flex: 0 1 clamp(300px, 42%, 480px);
min-width: 0;
display: flex;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-3);
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
font-size: var(--text-sm);
line-height: 1.6;
color: var(--text-secondary);
/* Clears the absolutely-positioned .candidate-card__top-right cluster
(~:4066), which is out of flow and reserves no space. The panel's right
edge otherwise sits only 16px from the card edge (the card's own
padding-right) while the cluster occupies the first 72px, so the panel's
top-right corner would render UNDER the bookmark/select icons.
Horizontal clearance, mirroring the 72px gutter the left column already
puts on .candidate-card__identity-line / .candidate-card__meta-row -
same cluster, same constant, both axes now consistent.
margin, NOT padding: this is a bordered/tinted panel, so padding would
leave the border box under the icons and only inset the text.
Replaces a former `margin-top: 44px`, which cleared the same collision by
pushing the whole aside down a row - the misalignment this fixes. */
margin-right: 72px;
}
/* Pinned to the FIRST LINE of the summary, not vertically centred in the block:
the text runs to several lines, and a centred glyph would float away from the
sentence it introduces. The 2px nudge optically centres it against that first
line rather than aligning its box to the cap height. */
.candidate-card__summary-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
width: 16px;
height: 16px;
margin-top: 2px;
color: var(--icon-muted);
}
.candidate-card__summary-icon svg {
width: 16px;
height: 16px;
}
/* careerSummary is rich text (sanitizeRichText in candidate-card.js), so it can
contain //. Flatten the block margins a sanitized would
otherwise bring in, which would push the text off-centre inside the padding
box, and keep the whole thing shrinkable inside the flex row. */
.candidate-card__summary-text {
min-width: 0;
}
.candidate-card__summary-text > *:first-child {
margin-top: 0;
}
.candidate-card__summary-text > *:last-child {
margin-bottom: 0;
}
/* Below the md breakpoint (design.md §3.2) the two columns STACK: at that width
the aside would be squeezed to a few words per line while crushing the facts
row beside it. Full width and below the data, which is the same reading order
the source already has. */
@media (max-width: 767px) {
.candidate-card__main {
flex-direction: column;
gap: var(--space-3);
/* ⚠️ `stretch`, overriding the `flex-start` above, and it is REQUIRED - not
a tidy-up. Once the direction flips to column, `align-items` governs the
HORIZONTAL axis: with `flex-start` both children size to their max-content
width, so the left column blew past the card (571px inside a 239px row)
and `min-width: 0` could not stop it - that property constrains the MAIN
axis, which is now vertical. `stretch` makes both children take the card's
full width, which is what a stacked layout wants anyway. */
align-items: stretch;
}
.candidate-card__summary {
/* Cancels the clamp()ed basis from the base rule so the aside spans the full
card rather than staying pinned near 200-320px under the data. */
flex: 1 1 auto;
width: 100%;
/* Stacked layout puts the summary below the left column, nowhere near the
top-right cluster - the base rule's 72px clearance would be a dead
gutter shrinking the panel. */
margin-right: 0;
}
}
.candidate-card .candidate-card__facts {
margin-top: var(--space-2);
}
.candidate-card .candidate-card__skills {
margin-top: var(--space-2);
}
.candidate-card .candidate-card__footer {
margin-top: var(--space-2);
padding-top: 0;
}
.candidate-card__avatar,
.avatar {
width: 56px;
height: 56px;
border-radius: var(--radius-full);
object-fit: cover;
flex-shrink: 0;
background: var(--bg-elevated);
border: 1px solid var(--border-default);
}
.avatar-placeholder {
display: flex;
align-items: center;
justify-content: center;
color: var(--icon-muted);
}
.avatar-placeholder svg {
width: 28px;
height: 28px;
}
/* Default avatar illustration (components.md §78, design.md §9) - the
gender-derived silhouette shown for candidates who skipped the OPTIONAL
profile photo. Sibling of .avatar-placeholder, not a modifier of it: the two
are mutually exclusive states and .avatar-placeholder's 28px centred-glyph
sizing is exactly what this must NOT inherit.
Full-bleed is the whole point - the bust is drawn past the bottom edge of the
SVG viewBox and clipped by the mount's own border-radius, which is what makes
it read as a Facebook-style silhouette rather than a small icon in a circle.
Hence overflow:hidden + 100% sizing.
Colour comes from the two tokens (no raw hex here, per instructions.md), so
light and dark are both correct with no second rule. Every mount already
sets its own width/height/border-radius; this block only paints and fills.
⚠️ The doubled `.avatar-illustration.avatar-illustration` is DELIBERATE, not
a typo. This one class is applied to five different mounts, four of which
already set their own `background` and/or `svg { width: Npx }` in rules that
land LATER in the cascade - either further down this file
(.candidate-profile__avatar, :4640) or in a page stylesheet that loads after
components.css (.shortlist-card__avatar, .pv-avatar,
.profile-form__photo-placeholder). At equal (0,1,0)/(0,1,1) specificity the
later rule wins, so a single class would silently lose on most mounts and
the silhouette would render as a small centred glyph on the wrong surface.
Repeating the class raises this to (0,2,0)/(0,2,1) so it wins everywhere
without needing one bespoke override per mount - and, more importantly,
without a future sixth mount needing to remember to add one. */
.avatar-illustration.avatar-illustration {
overflow: hidden;
background: var(--avatar-illustration-surface);
color: var(--avatar-illustration-figure);
}
.avatar-illustration.avatar-illustration svg {
display: block;
width: 100%;
height: 100%;
}
/* Name, alone on its line (design.md §9 ".name"): the anchor of the whole card
at text-h5/700. The title no longer shares this line - it moved to the role
line above - so the name is now the single flex item and takes the truncation
itself. The right gutter clears the top-right control cluster so a long name
never runs under the bookmark/select. */
.candidate-card__identity-line {
display: flex;
align-items: baseline;
gap: var(--space-2);
min-width: 0;
margin: 0;
padding-right: 72px;
}
.candidate-card__name {
font-family: var(--font-display);
font-size: var(--text-h5);
font-weight: 700;
color: var(--text-primary);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Role line (design.md §9): the quiet line at the TOP of the column, sharing
its row with the assessment status badge. Same right gutter as the name line
so it clears the top-right control cluster.
BOTH children are optional now (the role because it is optional data, the
badge because most candidates have no live assessment), so this row can be
empty. `:empty` collapses it to zero height rather than leaving a phantom
14px gap above the name - without this, a card with neither would sit
visibly lower than one with a role. */
.candidate-card__meta-row {
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0;
padding-right: 72px;
}
.candidate-card__meta-row:empty {
display: none;
}
/* The role title, in the slot the "Gender, Age" demographics line used to hold
(which is now a fact in the meta row below). Weight 500 lifts it just clear
of plain metadata without competing with the name beneath it. */
.candidate-card__role {
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-secondary);
margin: 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.candidate-card__status {
flex-shrink: 0;
}
/* Meta row (design.md §9 ".meta"): the FOUR facts as an inline, wrapping
icon + value row - Gender/Age / Location / Experience / Type,Availability -
with NO uppercase micro-labels (removed for a minimal, uncongested card; the
icon carries the meaning). Classifications used to be a fifth cell here and now
have their own row (the --classifications modifier below). Generous column-gap
gives the reference's airy rhythm. Card-only classes now (the drawer/Profile
use the .candidate-profile__* namespace), so no scoping is needed. */
.candidate-card__facts {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
column-gap: var(--space-5);
row-gap: var(--space-2);
}
.candidate-card__fact {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
}
.candidate-card__fact svg {
width: 15px;
height: 15px;
flex-shrink: 0;
color: var(--icon-muted);
}
/* Value at the 14px body step, quiet (--text-secondary) so the meta row reads
as a supporting line beneath the name.title anchor (matches the reference). */
.candidate-card__fact-value {
font-size: var(--text-sm);
color: var(--text-secondary);
white-space: nowrap;
}
/* Classifications row (components.md §23): the up-to-five classifications the candidate
works in, on their OWN row directly below the facts. Not a sixth cell inside
.candidate-card__facts - three full taxonomy names ("Human Resources and
Recruitment . Banking and Financial Services . ...") are by far the longest
value on the card, and letting them wrap inside the shared facts row would
drag the short facts around as the viewport narrows. A row of its own wraps
as a unit. It inherits every .candidate-card__facts rule above (same icon
size, same gaps) and only adds the top spacing. */
.candidate-card__facts--classifications {
margin-top: var(--space-2);
}
/* When the value wraps to a second line, the inherited `align-items: center`
would float the icon into the vertical middle of the block, detached from
the text it labels. Pin it to the first line instead. */
.candidate-card__facts--classifications .candidate-card__fact {
align-items: flex-start;
}
.candidate-card__facts--classifications .candidate-card__fact svg {
/* Optical centring against the 14px/1.5 first line (21px tall, 15px glyph). */
margin-top: 3px;
}
/* The one fact value allowed to WRAP instead of ellipsizing. Nowrap is right
for the short facts - a truncated "Austin, United..." still reads - but
clipping the classifications line would hide entire classifications with no "+N"
affordance to signal it, so it soft-wraps onto a second line instead.
align-items on the parent .candidate-card__fact keeps the icon centred
against a two-line value. */
.candidate-card__fact-value--wrap {
white-space: normal;
}
/* Base layout stays UNSCOPED - the drawer also reuses .candidate-card__skills
as-is for a work-experience entry's small inline chip row
(candidate-drawer.js), which still needs this flex/wrap/gap layout with no
divider. */
.candidate-card__skills {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
}
/* Skills row (design.md §9): 5 chips + a "+N" overflow chip, one wrapping row
(VISIBLE_SKILL_COUNT in candidate-card.js owns the number). The old
two-chip-row min-height reservation (a uniform-height device for the retired
2-up grid) is gone - a list row sizes to its content. The "+N" chip is what
prevents silent clipping (never `overflow:hidden`), and it is now essential
rather than a nicety: a candidate may store up to 50 skills. */
/* Overflow chip ("+45"): same .chip-static pill as a real skill, but tabular-
feeling and never truncated. Card-only class, no scoping needed. */
.candidate-card__skills-more {
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
/* Actions (design.md §7/§9): View Profile (secondary) then Send Email (PRIMARY),
a LEFT-aligned pair at the foot of the card, sized to their labels (not
stretched full-width) and wrapping rather than overflowing on a narrow
viewport. A little top space separates them from the content above. The
Shortlist icon lives in the top-right cluster, not here; Send/Manage
Assessment stays absent (Candidate Detail Drawer only, via View Profile).
This is a SIBLING of .candidate-card__main, not a child of the left column, so
the pair aligns to the card's own left edge and the summary aside's height
never moves it. */
.candidate-card__footer {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: var(--space-2);
padding-top: var(--space-1);
}
.candidate-card__footer .btn {
flex: 0 0 auto;
}
/* "Send Email" carries `.candidate-card__email-btn` as a HOOK ONLY - it has no
declarations of its own any more, so no rule is needed here.
⚠️ It used to be RIGHT-PINNED with `margin-left: auto`. That rule was REMOVED
(components.md §23): the actions read as one ranked group in reading order per
design.md §7. Do not reintroduce the auto margin, and do not switch the footer
to `space-between` or `flex-end`; both would break the same grouping - which
matters more now that the footer is a PAIR, where any spread reads as two
unrelated controls rather than a secondary and its primary. */
.candidate-card__shortlist-btn {
flex-shrink: 0;
}
/* Bookmark glyph 18px -> 20px (text-h5, design.md §2.1; components.md §23) so
it holds its own against the name at the same size. GLYPH ONLY: `.btn-icon`
keeps its fixed 44x44 box, so the extra 2px is absorbed by the button's
invisible padding and the hit area stays at 44px (design.md §4.4) - never
size the button down to the glyph. Carries the `.candidate-card` ancestor to
out-specify the shared `.btn svg` 18px rule (0,2,1 vs 0,1,1) rather than
relying on source order, and to leave the drawer's own shortlist button
alone - candidate-drawer.js renders that one as a bare `.btn-icon` without
this class, so it stays at 18px. */
/* CAUSE OF THE MISALIGNMENT THIS FIXES (components.md §23, design.md §3.7):
`.btn-icon` sets width/height/padding but NO `display`, so the button stays
a block box and its is an INLINE child sitting on the text baseline
rather than being centred. Measured on the card, the two control boxes
shared a centreline exactly (the cluster's `align-items: center` was always
working) while the bookmark's visible GLYPH rode 3px high - so the pair read
as misaligned even though the boxes were not. Centring the button's own
content puts the glyph on the box centre, and therefore on the checkbox's
centreline.
Scoped to `.candidate-card` because `.btn-icon` is shared: the Candidate
Detail Drawer renders its own shortlist button as a bare `.btn-icon` with no
`.candidate-card` ancestor (candidate-drawer.js), as do the modal/overlay
close buttons, and none of them should shift. The same latent baseline
offset exists on those buttons - fixing it globally on `.btn-icon` would be
the real repair, but it would nudge every icon button in the app and is out
of scope here. */
.candidate-card .candidate-card__shortlist-btn {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Bookmark glyph at the pair's shared mark size (was --text-h5, the same 20px
by a different name - now pointing at the token both controls share so they
cannot drift apart). GLYPH ONLY: `.btn-icon` keeps its fixed 44x44 box, so
the hit area stays 44x44 (design.md §4.4) with the difference absorbed as
invisible padding - never size the button down to the glyph. The
`.candidate-card` ancestor also out-specifies the shared `.btn svg` 18px
rule (0,2,1 vs 0,1,1) rather than relying on source order. */
.candidate-card .candidate-card__shortlist-btn svg {
width: var(--candidate-control-glyph);
height: var(--candidate-control-glyph);
}
/* Bookmark hover, needed once the button moved onto the card surface
(components.md §23). The shared `.btn-icon:hover` fills with --bg-surface,
which is the SAME colour as a resting card - so hover feedback simply did
not render at all, and on a selected card (--bg-elevated) it painted a
lighter patch that read backwards.
Specificity note: `.btn-icon:hover:not(:disabled)` is (0,3,0), NOT (0,2,0)
- :not() contributes its argument's specificity - so this rule repeats the
:not() to reach (0,4,0) and win outright rather than tying and depending
on source order.
Light/dark are split for the same reason the card's own hover is (see the
shadow-vs-surface-lift rules above): there is no single token that reads as
a subtle scrim in both. In light, --border-default darkens the near-white
surface just enough; --border-strong would be a heavy grey disc. In dark
the card itself lifts to --bg-elevated on hover, and --border-default is
the SAME value as --bg-elevated - so it would be invisible again, and
--border-strong is the one step that still reads. Verified against the
hovered card background in both themes and on selected cards. */
.candidate-card .candidate-card__shortlist-btn:hover:not(:disabled) {
background: var(--border-default);
}
:root[data-theme="dark"] .candidate-card .candidate-card__shortlist-btn:hover:not(:disabled) {
background: var(--border-strong);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .candidate-card .candidate-card__shortlist-btn:hover:not(:disabled) {
background: var(--border-strong);
}
}
/* Accent tint once a candidate is in >=1 shortlist (assets/js/lib/
shortlist-store.js's isCandidateShortlisted()). The SOLID vs outline
distinction is now carried by an icon WEIGHT swap - candidate-card.js /
candidate-drawer.js render `bookmark-fill` (solid) when shortlisted and
`bookmark` (outline) otherwise - because Phosphor icons are always
`fill=currentColor`, so the old `fill: none`->`currentColor` toggle no longer
distinguishes states. This rule just tints whichever weight is rendered.
Used on both the candidate card and the drawer's shortlist button - which
are now the SAME control in the same place on both surfaces, pinned
top-right (components.md §23/§25). The drawer selector was
`.candidate-drawer__actions .btn-icon` while the bookmark lived in the
action footer; it is a named class now that the button has its own. */
.candidate-card__shortlist-btn.is-shortlisted,
.candidate-drawer__shortlist-btn.is-shortlisted {
color: var(--accent);
}
/* =========================================================================
* Shortlist Picker (unified add/remove checklist, renders into the generic
* Modal - assets/js/lib/shortlist-picker.js, components.md "Shortlist
* Picker"). Row styling modeled on .multi-select__option for consistency.
* ========================================================================= */
.shortlist-picker__list-label {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-secondary);
margin: 0 0 var(--space-2);
}
.shortlist-picker__create-form {
display: flex;
gap: var(--space-2);
align-items: center;
margin-bottom: var(--space-4);
flex-wrap: wrap;
}
.shortlist-picker__create-form .field__control {
flex: 1;
min-width: 160px;
height: 40px;
border-radius: var(--radius-pill);
}
.shortlist-picker__create-actions {
display: flex;
gap: var(--space-2);
}
.shortlist-picker__create-form .shortlist-picker__create-actions .btn {
height: 40px;
border-radius: var(--radius-pill);
}
.shortlist-picker__list {
display: flex;
flex-direction: column;
gap: var(--space-1);
max-height: 320px;
overflow-y: auto;
}
.shortlist-picker__row {
padding: var(--space-2);
border-radius: var(--radius-xs);
}
.shortlist-picker__row:hover {
background: var(--bg-surface);
}
.shortlist-picker__row-label {
display: flex;
align-items: center;
gap: var(--space-2);
cursor: pointer;
font-size: var(--text-sm);
}
.shortlist-picker__row-label input[type="checkbox"] {
accent-color: var(--accent);
width: 16px;
height: 16px;
flex-shrink: 0;
}
.shortlist-picker__row-name {
flex: 1;
min-width: 0;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.shortlist-picker__row-count {
font-size: var(--text-xs);
flex-shrink: 0;
}
.shortlist-picker__row-note {
margin: var(--space-1) 0 0 26px;
font-size: var(--text-xs);
color: var(--text-secondary);
}
.shortlist-picker__empty {
padding: var(--space-4) 0;
text-align: center;
color: var(--text-secondary);
font-size: var(--text-sm);
}
.shortlist-picker__quick-actions {
display: flex;
gap: var(--space-4);
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--border-default);
flex-wrap: wrap;
}
.shortlist-picker__quick-actions[hidden] {
display: none;
}
.shortlist-picker__quick-actions .link-btn {
color: var(--color-error);
}
/* =========================================================================
* Assessment Send Modal + Template Preview (assets/js/lib/assessment-actions.js,
* components.md "Assessment Actions"). Template picker rows mirror
* .shortlist-picker__row for visual consistency across the app's Modal-based
* pickers.
* ========================================================================= */
.assessment-send__list-label {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-secondary);
margin: 0 0 var(--space-2);
}
.assessment-send__template-list {
display: flex;
flex-direction: column;
gap: var(--space-1);
max-height: 200px;
overflow-y: auto;
margin-bottom: var(--space-4);
}
.assessment-send__row {
padding: var(--space-2);
border-radius: var(--radius-xs);
}
.assessment-send__row:hover {
background: var(--bg-surface);
}
.assessment-send__row-label {
display: flex;
align-items: center;
gap: var(--space-2);
cursor: pointer;
font-size: var(--text-sm);
}
.assessment-send__row-label input[type="radio"] {
accent-color: var(--accent);
width: 16px;
height: 16px;
flex-shrink: 0;
}
.assessment-send__row-name {
flex: 1;
min-width: 0;
font-weight: 600;
}
.assessment-send__row-summary {
font-size: var(--text-xs);
}
.assessment-send__empty {
padding: var(--space-4) 0;
text-align: center;
color: var(--text-secondary);
font-size: var(--text-sm);
}
.assessment-send__details {
padding-top: var(--space-4);
margin-top: var(--space-2);
border-top: 1px solid var(--border-default);
}
.assessment-send__details[hidden] {
display: none;
}
.assessment-send__preview {
margin-bottom: var(--space-4);
}
.assessment-send__actions {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--border-default);
}
.assessment-preview h3 {
margin-bottom: 2px;
}
.assessment-preview__section {
margin-top: var(--space-4);
}
.assessment-preview__section h4 {
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
margin-bottom: var(--space-2);
}
.assessment-preview__questions {
padding-left: var(--space-5);
}
.assessment-preview__question {
margin-bottom: var(--space-3);
}
.assessment-preview__question-prompt {
font-weight: 600;
margin: 0;
}
.assessment-preview__question-type {
font-size: var(--text-xs);
margin: 2px 0 var(--space-1);
}
.assessment-preview__options {
list-style: disc;
padding-left: var(--space-5);
font-size: var(--text-sm);
}
/* Review Assessment (assets/js/lib/assessment-actions.js
openReviewAssessmentModal()) - candidate's answer rendered alongside the
template preview above. Single/multiple-choice: the full option list
re-rendered with the candidate's picks marked, so the answer reads in
context of what was offered rather than in isolation. */
.assessment-preview__options li.is-selected {
font-weight: 600;
color: var(--accent);
}
.assessment-preview__answer {
margin: var(--space-1) 0 0;
font-size: var(--text-sm);
}
.assessment-preview__answer-label {
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
margin: 0 0 2px;
}
.assessment-preview__decision {
display: flex;
align-items: center;
gap: var(--space-2);
font-weight: 600;
margin-top: var(--space-1);
}
/* =========================================================================
* Candidate Assessment Card (assets/js/lib/candidate-assessment-card.js) -
* design.md §13 "Candidate Assessments". Same overall card shape as
* .template-card above (surface/border/radius), but with its own name since
* it renders a different domain object (an assessment record, not a
* template) with different fields (deadline, elapsed time, status badge).
* ========================================================================= */
.candidate-assessment-card {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4);
background: var(--bg-surface);
border: 1.5px solid var(--border-default);
border-radius: var(--radius-md);
}
.candidate-assessment-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
}
.candidate-assessment-card__name {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 700;
margin: 0;
}
.candidate-assessment-card__details {
font-size: var(--text-sm);
color: var(--text-secondary);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.candidate-assessment-card__deadline,
.candidate-assessment-card__elapsed {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--text-secondary);
margin: 0;
}
.candidate-assessment-card__deadline svg,
.candidate-assessment-card__elapsed svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.candidate-assessment-card__footer {
margin-top: var(--space-2);
}
/* =========================================================================
* Assessment question inputs (assets/js/lib/candidate-assessment-actions.js
* openTakeAssessmentOverlay()) - real answer controls, as opposed to
* .assessment-preview__questions above's read-only rendering. Radio/
* checkbox row visuals reuse the same pattern already established by
* .assessment-send__row-label (single-select template picker) and
* .shortlist-picker__row-label (multi-select checklist).
* ========================================================================= */
.assessment-question {
margin-bottom: var(--space-5);
}
.assessment-question__prompt {
font-weight: 600;
margin: 0;
}
.assessment-question__type {
font-size: var(--text-xs);
margin: 2px 0 var(--space-2);
}
.assessment-question__options {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.assessment-question__option-label {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border: 1.5px solid var(--border-default);
border-radius: var(--radius-xs);
cursor: pointer;
}
.assessment-question__option-label:has(input:checked) {
border-color: var(--accent);
background: var(--bg-elevated);
}
/* =========================================================================
* Assessment Attachments (assets/js/lib/candidate-assessment-actions.js) -
* the take-assessment overlay's optional file/link submission section,
* shown only when the employer's template allows it. File list reuses
* .resume-dropzone (components.css, above) for the dropzone itself; the
* rows below are new.
* ========================================================================= */
.assessment-attachments {
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--border-default);
}
.assessment-attachments h4 {
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
margin-bottom: var(--space-2);
}
/* ⚠️ TWO CONSUMERS, despite the name: the take-assessment overlay's attachment
* dropzone (candidate-assessment-actions.js) AND the Send Email composer's
* Attachments field, its preview, and the Email Details overlay
* (email-compose.js / email-details-drawer.js, components.md §90). Both render
* the same object - an attached file with a name and a size - so they share one
* row rather than two that resemble each other. Renaming this block means
* updating both. */
.assessment-attachments__file-list {
margin-top: var(--space-2);
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.assessment-attachments__file-row {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-xs);
font-size: var(--text-sm);
}
.assessment-attachments__file-row svg {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--icon-muted);
}
.assessment-attachments__file-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.assessment-links {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-top: var(--space-3);
}
.assessment-links__row {
display: flex;
align-items: center;
gap: var(--space-2);
}
.assessment-links__row .field__control {
flex: 1;
}
/* =========================================================================
* Assessment Taking Overlay (assets/js/lib/candidate-assessment-actions.js
* openTakeAssessmentOverlay()) - right-side overlay, same fixed-panel
* construction as .resume-viewer-overlay above (design.md §10 "Drawer / side
* panel"), with its own header layout (title + live elapsed-time timer) and
* a sticky footer for the Submit Assessment action.
* ========================================================================= */
.assessment-taking-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 560px;
max-width: 100vw;
background: var(--bg-base);
border-left: 1px solid var(--border-default);
box-shadow: var(--shadow-xl);
z-index: var(--z-drawer);
display: flex;
flex-direction: column;
}
.assessment-taking-overlay__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-4);
border-bottom: 1px solid var(--border-default);
flex-shrink: 0;
}
.assessment-taking-overlay__heading {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
}
.assessment-taking-overlay__title {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.assessment-taking-overlay__timer {
display: flex;
align-items: center;
gap: var(--space-1);
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--accent);
}
.assessment-taking-overlay__timer svg {
width: 16px;
height: 16px;
}
.assessment-taking-overlay__body {
flex: 1;
overflow-y: auto;
padding: var(--space-5);
}
.assessment-taking-overlay__footer {
display: flex;
justify-content: flex-end;
padding: var(--space-4);
border-top: 1px solid var(--border-default);
flex-shrink: 0;
}
@media (max-width: 599px) {
.assessment-taking-overlay {
width: 100%;
}
}
/* =========================================================================
* Action Menu (assets/js/lib/assessment-actions.js openManageAssessmentMenu()
* - a small anchored popover of buttons, positioned via `position: fixed` +
* JS-computed coordinates rather than .filter-popover's `position: absolute`,
* since its trigger can live inside an already-scrolling ancestor. See
* components.md "Assessment Actions" for the rationale.
*
* z-index bug fix: its only trigger today is the Candidate Detail Drawer's
* "Manage Assessment" button (`.candidate-drawer`, z-index var(--z-drawer)) -
* at `var(--z-dropdown)` this menu rendered BEHIND the drawer, so it was
* visible but every click on a menu item was silently intercepted by the
* drawer underneath instead. Raised above `--z-drawer` to fix.
* ========================================================================= */
.action-menu {
position: fixed;
z-index: var(--z-modal);
min-width: 200px;
background: var(--bg-elevated);
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg);
padding: var(--space-2);
display: flex;
flex-direction: column;
gap: 2px;
}
.action-menu__item {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-xs);
background: none;
border: none;
cursor: pointer;
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-primary);
text-align: left;
}
.action-menu__item:hover {
background: var(--bg-surface);
}
.action-menu__item svg {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--icon-muted);
}
.action-menu__item--danger {
color: var(--color-error);
}
.action-menu__item--danger svg {
color: var(--color-error);
}
/* =========================================================================
* `.bulk-action-bar` - REMOVED (was: the original in-flow bulk toolbar)
* -------------------------------------------------------------------------
* DELETED, not deprecated: it has no consumers left. The three screens that
* used it all now run the shared floating `.bulk-pill` below - Candidates was
* forked to it first (components.md §24), the Assessments Active tab was
* migrated next (§44), and the Shortlists detail view was the last holdout
* (§37). Its markup gained the tally chip, clear button, divider and pill
* button classes in that conversion, which is exactly what the old note here
* warned this block did not supply.
*
* Kept as a tombstone rather than a silent deletion because the class name is
* still referenced in the docs' history and in a handful of z-index comments
* below. If you are looking for it: there is nothing to restore, and a new
* bulk surface should use `.bulk-pill`, not a revival of this.
* ========================================================================= */
/* =========================================================================
* Bulk Selection Pill - `.bulk-pill` (components.md §24, §44)
* -------------------------------------------------------------------------
* The contextual bulk-action surface: a rounded floating pill fixed to the
* bottom-centre of the content column, animating up on the first selection and
* away when the selection empties. Shared by the Candidates screen and the
* Assessments Active tab (§44) - both drive it the same way (toggle .is-visible,
* write the count into .bulk-pill__count), so their bulk UI is identical. Only
* the action buttons differ per screen; everything else is one component.
*
* ALL THREE CANDIDATE GRIDS now run this: Candidates (§24), the Assessments
* Active tab (§44) and the Shortlists detail view (§37). It began as a FORK of
* `.bulk-action-bar` rather than an edit of it, because that block was still
* driving screens whose markup had no tally chip or divider - forking kept them
* byte-identical while Candidates moved. Each has since been converted and
* `.bulk-action-bar` is gone (see the tombstone above), so the fork is now
* simply the component.
*
* WHY ITS OWN BUTTON CLASSES rather than `.btn.btn-secondary`: see the long
* comment on `.bulk-pill__btn` below. In short, `.btn-secondary`'s shared
* hover rule is a specificity fight this component kept losing, and not
* matching it at all is a structural fix rather than another override.
* ========================================================================= */
.bulk-pill {
/* Fixed to the VIEWPORT, not to any scroll container (design.md §3.2).
--z-sticky is deliberate and is the CEILING, not a floor: the pill is
page chrome, so everything in the overlay tiers must cover it - the
off-canvas nav rail and the candidate drawer (--z-drawer), the modals
this pill itself opens (--z-modal), and toasts (--z-toast). At
--z-drawer it tied with the rail and, being later in the DOM, painted
OVER the open mobile nav drawer.
It shares 200 with .search-filter-bar and wins that tie on DOM order,
which is harmless: one is pinned to the top edge and the other to the
bottom, so they never overlap. The search bar's own filter popovers sit
at --z-drawer and so still open above the pill, which is correct. */
position: fixed;
bottom: 28px;
z-index: var(--z-sticky);
/* Centred on the CONTENT COLUMN, not the viewport. The icon rail is an
in-flow flex sibling (dashboard-shell.css), not a fixed overlay, so a
plain `left: 50%` would sit visibly left of the content it acts on.
Offsetting by half the rail width re-centres it and keeps it clear of
the rail. The rail is `fit-content` with --sidebar-rail-width as a
floor, so this is a close approximation rather than pixel-exact - fine
for a floating element, and it resets to a true centre below 600px
where the rail goes off-canvas (see the media query at the end). */
left: calc(50% + var(--sidebar-rail-width) / 2);
/* Never touches the viewport edges.
⚠️ THE 1100px CEILING IS A FLOOR-FOR-CONTENT, NOT A TARGET. The pill is
shrink-to-fit, so it is only ever as wide as its children - this number
just has to be >= the WIDEST pill in the app, which is the Specific
Shortlist one (tally + clear + divider + its action buttons). It was 900px,
sized when the widest pill was the Candidates screen's three buttons; the
extra action ("Remove from Shortlist") pushed the content past the cap and,
because every child is `flex-shrink: 0` under `flex-wrap: nowrap`, the
overflow was not clipped or wrapped - the last button simply painted OUTSIDE
the accent bar. Raising the cap is the fix.
KEPT AT 1100px deliberately, even though the Shortlist pill currently
renders only three labelled buttons (~770px) because Send Assessment is
hidden behind ASSESSMENTS_ENABLED. A ceiling above the content width costs
nothing on a shrink-to-fit box, and this value is already correct for the
four-button pill that returns if that flag flips. Do not "tighten" it.
The point at which the offset centring runs out of room for the LABELS is a
separate, flag-sensitive number - see the media query at the end of this
component. */
max-width: min(calc(100vw - var(--space-8)), 1100px);
display: flex;
align-items: center;
gap: var(--space-3);
/* No wrapping: the pill shrinks by dropping labels at 600px (below)
rather than growing a second row, which would break the fixed
bottom offset. */
flex-wrap: nowrap;
padding: var(--space-2) var(--space-3);
/* Squared off to the 4px scale step (design.md §3.3 `--radius-xs`;
components.md §24). Was --radius-full, which made the container a true
pill. CONTAINER ONLY - the contents are deliberately unchanged: the count
chip stays --radius-sm (also 4px, so it reads flush with the bar), and the
clear button and the three action buttons stay --radius-full, so the
component now reads as a squared bar holding round controls.
No dark-mode counterpart is needed: the [data-theme="dark"] rules below
override only box-shadow/border-color, so both themes inherit this. */
border-radius: var(--radius-xs);
background: var(--accent);
color: var(--accent-text-on);
/* Elevation (design.md §3.4). Light mode gets the largest shadow token -
this is the most-elevated transient surface on the page. A faint light
hairline defines the edge where the shadow is weakest. */
box-shadow: var(--shadow-xl);
border: 1px solid rgba(255, 255, 255, 0.14);
/* Enter/exit (design.md §3.5). Transform + opacity only, so the animation
stays off the layout/paint path. The 340ms spring easing overshoots
slightly on entry - a deliberate one-off outside the standard
120/200/320 scale, which --ease-out cannot express. Opacity uses the
standard --duration-base so the pill is legible before it finishes
settling. */
transition:
transform 0.34s cubic-bezier(0.3, 1.1, 0.4, 1),
opacity var(--duration-base) var(--ease-out);
/* Hidden resting state. The element is ALWAYS MOUNTED and never carries
`hidden`/`display: none` - either would cancel the transition, and the
JS toggles the .is-visible class precisely so it doesn't have to.
pointer-events is what actually makes the invisible pill inert; without
it the off-screen pill would still swallow clicks at the page bottom. */
transform: translate(-50%, 140%);
opacity: 0;
pointer-events: none;
}
.bulk-pill.is-visible {
transform: translate(-50%, 0);
opacity: 1;
pointer-events: auto;
}
/* design.md §3.5: honour prefers-reduced-motion. The pill fades only. The
transform is pinned to its VISIBLE value in both states - not merely
un-transitioned - otherwise the hidden state would leave it parked 140%
below the viewport and it would fade in somewhere off-screen. */
@media (prefers-reduced-motion: reduce) {
.bulk-pill,
.bulk-pill.is-visible {
transition: opacity var(--duration-base) var(--ease-out);
transform: translate(-50%, 0);
}
}
/* ---- Count tally (components.md §24) ---- */
.bulk-pill__tally {
display: flex;
align-items: center;
gap: var(--space-2);
padding-left: var(--space-2);
font-size: var(--text-sm);
white-space: nowrap;
}
/* Small inset tile in the page's base surface, which reads as a lighter
cut-out on the accent pill in BOTH themes (light: near-white on deep teal;
dark: deep teal on mint - inverted, still a clear figure/ground break). */
.bulk-pill__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 24px;
padding: 0 var(--space-1);
border-radius: var(--radius-sm);
background: var(--bg-base);
color: var(--accent);
font-weight: 700;
/* Tabular figures so the pill does not shift width as the count crosses
9 -> 10 -> 100 while the user is still clicking cards. */
font-variant-numeric: tabular-nums;
}
/* The muted half of the tally. Reduced opacity rather than a separate token:
--text-secondary is tuned for page surfaces and has no on-accent partner,
so stepping the on-accent ink down is the only token-pure way to mute it
in both themes at once. Kept at .75 so it stays comfortably legible. */
.bulk-pill__label {
opacity: 0.75;
}
/* ---- Clear selection (design.md §4.4) ----
The glyph is 18px but the control is a full 44x44 target: the extra area
is invisible padding, exactly as §4.4 prescribes for icon-only controls. */
.bulk-pill__clear {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex-shrink: 0;
padding: 0;
border: 0;
border-radius: var(--radius-full);
background: transparent;
color: var(--accent-text-on);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
}
.bulk-pill__clear svg {
width: 18px;
height: 18px;
}
.bulk-pill__clear:hover {
/* --accent-hover is one step from --accent in both themes, so the fill
stays on the same side of the contrast line as the pill and the
--accent-text-on glyph keeps reading against it. */
background: var(--accent-hover);
}
/* ---- Divider ----
currentColor so it tracks --accent-text-on through both themes without a
second token; decorative only, hidden from the a11y tree in the markup. */
.bulk-pill__divider {
width: 1px;
height: 24px;
flex-shrink: 0;
background: currentColor;
opacity: 0.25;
}
/* ---- Action buttons (design.md §7) ----
* STANDALONE CLASSES, NOT `.btn.btn-secondary`. This is load-bearing.
*
* HISTORY: the previous bulk bar used `.btn-secondary`, whose shared hover
* rule fills the button with `--bg-surface`. That is correct on a normal
* page surface (dark --accent label on a light fill) but catastrophic on an
* accent-filled bar, where the label is inverted to --accent-text-on: the
* fill collapsed the text into the background at ~1.04:1 light / ~1.09:1
* dark - the labels effectively vanished on hover. The scoped override that
* fixed it had to restate the shared rule's full
* `:not(:disabled):not([aria-disabled="true"])` chain just to reach a
* winning specificity, and any future edit that shortened the selector would
* silently reintroduce the bug.
*
* The pill sidesteps the fight entirely: `.bulk-pill__btn` is not
* `.btn-secondary`, so the shared rule never matches and there is no
* specificity race to lose. DO NOT re-add `.btn` / `.btn-secondary` to these
* buttons - it would resurrect the exact collapse described above. */
.bulk-pill__btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
flex-shrink: 0;
height: 36px;
padding: 0 var(--space-3);
border-radius: var(--radius-full);
font-family: inherit;
font-size: var(--text-sm);
font-weight: 600;
line-height: 1;
white-space: nowrap;
cursor: pointer;
/* Ghost-on-accent: transparent fill, on-accent ink and hairline.
1.5px matches design.md §7's secondary outline weight. */
background: transparent;
color: var(--accent-text-on);
border: 1.5px solid var(--accent-text-on);
transition:
background var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
/* ⚠️ REQUIRED, not defensive. `display: inline-flex` above has the same
specificity as the UA's `[hidden]{display:none}` and wins on cascade order, so
a `hidden` pill button stays VISIBLE without this. Added when the Candidates
bulk bar's "Send Assessment" was hidden (components.md §86) and turned out to
still render. Exactly the same trap `.btn[hidden]`, `.alert[hidden]` and
`.search-filter-bar__clear[hidden]` already work around in this file. */
.bulk-pill__btn[hidden] {
display: none;
}
/* ---- Tooltip carrier (components.md §93) ----
A transparent wrapper whose ONLY job is to hold [data-tooltip] for a button
that is dimmed by the disabled state below.
⚠️ It exists because `opacity: 0.4` on the button also fades the button's own
::after, and opacity cannot be undone by a descendant - the tooltip rendered
at 40% and was barely readable. Hanging the tooltip on a wrapper OUTSIDE the
dimmed element is the only fix that keeps design.md §7's 40% disabled
treatment intact. The keyboard path is carried by the
[data-tooltip]:focus-within rule in dashboard-shell.css, since a span is not
focusable itself.
inline-flex so the wrapper is layout-invisible: the button remains the thing
that sizes, and the pill's own flex gap still spaces it like every other
direct child. */
.bulk-pill__tip {
position: relative;
display: inline-flex;
flex-shrink: 0;
}
/* design.md §4.4: the visible pill is 36px tall to keep the bar compact, but
the HIT AREA must still be >=44px. This pseudo-element extends the target
4px above and below without affecting layout. */
.bulk-pill__btn::before {
content: "";
position: absolute;
inset: -4px 0;
}
.bulk-pill__btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Hover restates BOTH background and colour, so the legible pairing is
explicit at the point of use and can never be half-inherited. */
.bulk-pill__btn:hover:not(:disabled):not([aria-disabled="true"]) {
background: var(--accent-hover);
border-color: var(--accent-text-on);
color: var(--accent-text-on);
}
/* Primary action (Add to Shortlist): filled, using the page's base surface
as the fill and the pill's own accent as the ink - the inverse of the
ghost buttons. In dark mode this resolves to a deep-teal chip on the mint
pill; in light mode a white chip on the deep-teal pill. */
.bulk-pill__btn--primary {
background: var(--bg-base);
color: var(--accent);
border-color: var(--bg-base);
font-weight: 700;
}
.bulk-pill__btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
/* --accent-tint is the muted partner of --accent in both themes, so it
stays light enough for the --accent label to hold contrast. Colour is
restated for the same reason as above. */
background: var(--accent-tint);
border-color: var(--accent-tint);
color: var(--accent);
}
/* ---- Danger action (Remove from Shortlist, components.md §37) ----
AT REST IT IS AN ORDINARY GHOST BUTTON. That is the decision, not an
oversight: this bar appears whenever an employer selects a card, including
when they are only browsing, and a permanently red button on an accent bar
reads as an alarm on a screen where nothing is wrong. It commits to the
meaning at the point of action instead - the red arrives on hover/focus, the
moment the pointer is actually on the destructive control - which is the same
escalation `.btn-danger` uses one step earlier. The confirm dialog behind it
(design.md §10) is the real safety net; this is the warning colour, not the
guard.
Ink is a local custom property rather than a hardcoded white because
--color-error flips from a deep red (#b91c1c) to a light one (#f87171) in
dark mode, and white on #f87171 is 2.77:1 - a fail. Measured: light
#b91c1c/white = 6.47:1, dark #f87171/--neutral-900 = 6.77:1.
Source order matters: this rule and the generic .bulk-pill__btn:hover above
have the SAME specificity (0,4,0), so it must stay below it to win. */
.bulk-pill__btn--danger {
--bulk-danger-ink: var(--color-white);
}
.bulk-pill__btn--danger:hover:not(:disabled):not([aria-disabled="true"]),
.bulk-pill__btn--danger:focus-visible {
background: var(--color-error);
border-color: var(--color-error);
color: var(--bulk-danger-ink);
}
/* Both selectors are needed to match how tokens.css pairs an explicit
[data-theme] with the OS preference - same pattern as the .bulk-pill
dark-mode elevation rules below. */
[data-theme="dark"] .bulk-pill__btn--danger {
--bulk-danger-ink: var(--neutral-900);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .bulk-pill__btn--danger {
--bulk-danger-ink: var(--neutral-900);
}
}
/* design.md §7: 40% opacity + not-allowed, excluded from hover by the
:not() chains above.
⚠️ ONE REAL CONSUMER NOW (components.md §24): the Candidates pill's
#bulk-send-email-btn is inactive while any selected candidate is still
hidden, since there is no address to send to. It uses `aria-disabled`, NOT
the `disabled` property, and that choice is load-bearing rather than
stylistic - a truly disabled button dispatches no pointer events and is not
focusable, so its [data-tooltip] explanation could never be reached by
hover OR by keyboard. The reason is duplicated into the button's aria-label
for screen readers (design.md §7: disable "with an explanation where the
reason isn't obvious"). The click handler carries its own guard, because an
aria-disabled button still fires click. */
.bulk-pill__btn:disabled,
.bulk-pill__btn[aria-disabled="true"] {
opacity: 0.4;
cursor: not-allowed;
}
/* ---- Focus (design.md §4.2) ----
2px, 2px offset, on EVERY interactive control in the pill. The ring colour
is --accent-text-on rather than the usual --focus-ring: --focus-ring is
accent-toned, and on an accent-filled surface it would be invisible. This
is a deliberate, documented deviation (components.md §24). */
.bulk-pill__btn:focus-visible,
.bulk-pill__clear:focus-visible {
outline: 2px solid var(--accent-text-on);
outline-offset: 2px;
}
/* The primary button's fill IS --bg-base, so an --accent-text-on ring would
disappear into it in light mode. Its ring takes the pill's accent instead,
which reads against both the button fill and the pill behind it. */
.bulk-pill__btn--primary:focus-visible {
outline-color: var(--accent);
}
/* ---- Elevation in dark mode (design.md §3.4) ----
"Dark mode uses no shadows - elevation comes from surface lightening plus
a --border-default hairline." Both selectors are needed to match how
tokens.css pairs an explicit [data-theme] with the OS preference. */
[data-theme="dark"] .bulk-pill {
box-shadow: none;
border-color: var(--border-default);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .bulk-pill {
box-shadow: none;
border-color: var(--border-default);
}
}
/* ---- Widest pill, medium viewports (components.md §24) ----
SPECIFIC SHORTLIST ONLY. That screen's pill carries one action more than the
Candidates set (§24 records why: it adds "Remove from Shortlist"), so it is
the widest pill in the app and stops fitting before the shared 600px collapse
point. The pill is centred on the CONTENT COLUMN (`left: 50% + rail/2`), so
its right edge sits at `50vw + 38px + w/2`; keeping that inside the viewport
gutter needs `w <= 100vw - 124px`. Below that the buttons overflow the accent
bar instead of wrapping, since the pill is `nowrap` with non-shrinking
children.
⚠️ THIS THRESHOLD TRACKS THE NUMBER OF *VISIBLE* BUTTONS, AND IT IS EASY TO
GET WRONG - it already was once, in both directions.
History, because the arithmetic is the only way to re-derive this number:
- 1099px, for FOUR labelled buttons (~960px content, ~1084px viewport).
- Corrected to 899px once it was noticed that
`#detail-bulk-assessment-btn` is `hidden` behind ASSESSMENTS_ENABLED
(assets/js/lib/feature-flags.js), leaving only THREE visible (~770px
content, ~894px viewport). The old number had been stripping labels off a
pill with ~200px to spare.
- BACK TO 1099px NOW: "Download CVs" (components.md §106) adds a fourth
VISIBLE button to this pill, so the four-button budget above applies
again - Remove from Shortlist -> Add to another Shortlist -> Download CVs
-> Send Email. At 899px those four would paint outside the accent bar,
which is the exact failure this query exists to prevent.
⚠️ IF ASSESSMENTS_ENABLED IS FLIPPED ON, a FIFTH visible button appears here
and this must rise again (~1150px of content, so ~1299px) - re-run the
`w <= 100vw - 124px` budget above rather than guessing.
The treatment is the SAME ONE the 600px query applies, just triggered
earlier for this pill: every action label drops to its icon + aria-label,
and the tally keeps its number. ALL of them collapse together - leaving the
short labels in would make those buttons read as a different kind of
control from their icon-only neighbours (same reasoning as the note in the
600px query below). The tally's "selected" is KEPT here: there is room for
it at this width, and it is what makes the count legible as a count.
⚠️ Every id below must have an aria-label in the markup - the label span is
its only visible name once collapsed. */
@media (max-width: 1099px) {
#shortlist-detail-bulk-bar .bulk-pill__btn-text {
display: none;
}
/* design.md §4.4's 44px floor, for the same reason as the 600px query: the
::before hit area only stretches vertically, so width is held here. */
#shortlist-detail-bulk-bar .bulk-pill__btn {
min-width: 44px;
padding: 0 var(--space-2);
}
}
/* ---- Candidates pill, medium viewports (components.md §24 + §106) ----
NEW WITH DOWNLOAD CVs, and the same budget as the shortlist query above.
The Candidates pill used to hold two labelled actions (Add to Shortlist ->
Send Email), which fit comfortably down to the shared 600px collapse. Adding
"Download CVs" makes three (~770px of content, needing ~894px of viewport by
the `w <= 100vw - 124px` budget derived above), so it now needs its own
earlier collapse for exactly the reason the shortlist pill has one.
Separate query rather than a shared selector: the two pills hold a different
number of buttons and therefore collapse at different widths. Merging them
would drag one of the two to the wrong threshold.
⚠️ IF ASSESSMENTS_ENABLED IS FLIPPED ON, `#bulk-assessment-btn` becomes
visible here too and this must rise to 1099px to match the shortlist pill. */
@media (max-width: 899px) {
#bulk-action-bar .bulk-pill__btn-text {
display: none;
}
#bulk-action-bar .bulk-pill__btn {
min-width: 44px;
padding: 0 var(--space-2);
}
}
/* ---- Narrow viewports (components.md §24) ----
600px is the same breakpoint at which the icon rail goes off-canvas
(dashboard-shell.css), so the pill returns to a true viewport centre at
exactly the point the rail stops occupying space. Labels drop out to keep
the pill inside the viewport: the word "selected" (the number alone still
reads, and the live region still announces the full sentence) and EVERY
action label, each falling back to its icon plus the aria-label already on
the button. Every control keeps its >=44px target - only text is removed,
never padding. */
@media (max-width: 599px) {
.bulk-pill {
left: 50%;
gap: var(--space-2);
max-width: calc(100vw - var(--space-4));
}
.bulk-pill__label,
.bulk-pill__btn-text {
display: none;
}
/* Icon-only now, so the horizontal padding squares up around the glyph.
min-width is load-bearing, not cosmetic: with the label gone the button
collapsed to 35px wide, under design.md §4.4's 44px floor. The ::before
on .bulk-pill__btn only extends the target VERTICALLY, so the width has
to be held here.
BOTH Candidates actions collapse, and all three of the Shortlist detail
screen's. Leaving one label would make that button read as a different kind
of control from its neighbours, and the labels plus the tally do not fit a
320px viewport anyway. (The reveal buttons that used to head this list are
gone with the reveal gate, components.md §24.) The
Assessments Active pill (components.md §44) collapses BOTH its action
labels, so its two buttons need the same floor here - same rule, not a
fork.
⚠️ Every id listed here must have an aria-label in the markup, since the
label span is its only visible name. */
#bulk-send-email-btn,
#bulk-shortlist-btn,
#detail-bulk-send-email-btn,
#detail-bulk-existing-btn,
#detail-bulk-remove-btn,
#bulk-update-deadlines-btn,
#bulk-cancel-all-btn {
min-width: 44px;
padding: 0 var(--space-2);
}
}
/* =========================================================================
* Drawer (design.md §10 - generic right-side panel). Used by the Candidate
* Detail Drawer (components.md "Candidate Detail Drawer" / "Resume View").
* ========================================================================= */
.drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(6, 27, 49, 0.5);
z-index: var(--z-drawer);
}
/* Fades in alongside the drawer's slide. Written as a keyframe animation on
the visible state rather than a transition between two static states, for
the fail-safe reason documented on .candidate-drawer below. */
.drawer-backdrop:not([hidden]):not(.is-closing) {
animation: drawer-backdrop-in var(--duration-base) var(--ease-out);
}
.drawer-backdrop.is-closing {
animation: drawer-backdrop-out var(--duration-base) var(--ease-in) forwards;
}
.drawer-backdrop[hidden] {
display: none;
}
@keyframes drawer-backdrop-in {
from {
opacity: 0;
}
}
@keyframes drawer-backdrop-out {
to {
opacity: 0;
}
}
.candidate-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 480px;
max-width: 100vw;
background: var(--bg-base);
border-left: 1px solid var(--border-default);
box-shadow: var(--shadow-xl);
z-index: var(--z-drawer);
overflow-y: auto;
overflow-x: hidden; /* guards against the sticky footer's full-bleed negative margins (below) ever poking out sideways */
/* No bottom padding here on purpose: a scroll container's own padding
always reserves empty space after its last child, regardless of that
child's margins - a negative-margin/sticky-offset trick can't "delete"
that reserved space (verified empirically). .candidate-drawer__actions
supplies its own bottom padding instead, so the sticky footer sits
flush with this container's true edge with no gap below it. */
padding: var(--space-6) var(--space-5) 0;
}
/* Slide-in from the right edge.
---------------------------------------------------------------------------
⚠️ Deliberately a keyframe animation ON THE VISIBLE STATE, not a transition
between an off-screen default and an .is-open class. With the transition
approach the drawer's *resting* style is translateX(100%), so anything that
stops the animation from running - a throttled or backgrounded renderer,
where neither rAF nor CSS transitions tick - leaves it un-hidden but parked
fully off-screen: an open dialog with a trapped focus ring and nothing
visible. That was observed in practice, not theorised.
Written this way the resting style IS the visible one. The animation only
plays the entrance; if it never runs, the drawer simply appears. Same for
the exit: .is-closing plays it out, and candidate-drawer.js hides the
element on a timer that does not depend on the animation finishing. */
.candidate-drawer:not([hidden]):not(.is-closing) {
animation: drawer-in var(--duration-slow) var(--ease-out);
}
.candidate-drawer.is-closing {
animation: drawer-out var(--duration-slow) var(--ease-in) forwards;
}
@keyframes drawer-in {
from {
transform: translateX(100%);
}
}
@keyframes drawer-out {
to {
transform: translateX(100%);
}
}
/* design.md §4.5 - honour "reduce motion": the drawer still appears and
disappears, just with no slide or fade. Suppressing the animations is
enough precisely because the resting state is the visible one (above);
candidate-drawer.js reads the same media query so it also skips the
exit delay and hides immediately. */
@media (prefers-reduced-motion: reduce) {
.candidate-drawer:not([hidden]):not(.is-closing),
.candidate-drawer.is-closing,
.template-drawer:not([hidden]),
.advanced-search-drawer:not([hidden]):not(.is-closing),
.advanced-search-drawer.is-closing,
.email-drawer:not([hidden]):not(.is-closing),
.email-drawer.is-closing,
.drawer-backdrop:not([hidden]):not(.is-closing),
.drawer-backdrop.is-closing {
animation: none;
}
}
.candidate-drawer[hidden] {
display: none;
}
@media (max-width: 599px) {
.candidate-drawer {
width: 100%;
}
}
/* =========================================================================
* Video Lightbox (components.md §102, design.md §14.8)
* -------------------------------------------------------------------------
* A centred overlay that plays one clip. Opened by the Employer dashboard's
* search-steps card 05; markup in dashboard/employer/index.html, behaviour in
* assets/js/lib/video-lightbox.js.
*
* REUSES .drawer-backdrop above rather than defining its own dimmer - same
* tint, same fade, same [hidden] handling, and it inherits the reduced-motion
* block for free. The only thing this component adds is the centred panel.
*
* CENTRED, NOT A SIDE PANEL, so it is deliberately NOT .candidate-drawer:
* video is the content, and a 480px right-hand rail would letterbox it to
* nothing. That is the whole reason this is a separate component and not a
* drawer variant.
*
* NOT built on modal.js either: that component owns a header bar with a title
* and a padded body, both of which would frame a video that should be
* full-bleed to its own rounded corners.
* ========================================================================= */
.video-lightbox {
position: fixed;
inset: 0;
/* Above --z-drawer: this opens from a page that can also have drawers, and
the dimmer it shares is at --z-drawer, so the panel must clear both. */
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
/* Keeps the panel off the viewport edges on small screens, and gives the
close button somewhere to sit without overhanging the screen. */
padding: var(--space-4);
/* ⚠️ LOAD-BEARING, AND NOT AN OPTIMISATION. This element is inset:0 and sits
ABOVE the shared .drawer-backdrop (--z-modal over --z-drawer), so as a
normal hit-target it covers the entire viewport and swallows every click
aimed at the dimmer - click-outside-to-close silently never fires. Letting
pointer events fall through here, and re-enabling them on the panel below,
is what makes the backdrop reachable. Verified: without this pair, clicking
the dimmed area does nothing. */
pointer-events: none;
}
.video-lightbox[hidden] {
display: none;
}
/* 16/9 with a max-width, rather than a fixed size: the panel is whatever the
viewport allows up to 1100px, and `aspect-ratio` keeps the shape without
needing the clip's real dimensions in CSS. min() so it also fits a phone in
landscape, where 92vw is the binding constraint rather than 1100px. */
.video-lightbox__panel {
position: relative;
/* Restores hit-testing for the video and its close button - the container
above disables it so the backdrop stays clickable. Both halves of that pair
are required; removing either one breaks a different interaction. */
pointer-events: auto;
width: min(1100px, 92vw);
max-height: 92vh;
aspect-ratio: 16 / 9;
border-radius: var(--radius-lg);
/* Clips the video's own square corners to the panel's radius. */
overflow: hidden;
/* Black, not a surface token, in BOTH themes: this is the letterbox behind
the frame, and a themed grey would show as mismatched bars against the
clip. One of the few deliberate hard-coded colours - see design.md §14.8. */
background: #000;
box-shadow: var(--shadow-xl);
}
/* Same fail-safe pattern as .candidate-drawer above: the animation plays on
the VISIBLE resting state, so a renderer that never runs it leaves the panel
simply present rather than stuck at scale(0.96) and invisible. */
.video-lightbox:not([hidden]):not(.is-closing) .video-lightbox__panel {
animation: video-lightbox-in var(--duration-base) var(--ease-out);
}
.video-lightbox.is-closing .video-lightbox__panel {
animation: video-lightbox-out var(--duration-base) var(--ease-in) forwards;
}
@keyframes video-lightbox-in {
from {
opacity: 0;
transform: scale(0.96);
}
}
@keyframes video-lightbox-out {
to {
opacity: 0;
transform: scale(0.96);
}
}
/* object-fit: contain, NOT cover: a clip whose aspect ratio is not 16/9 must be
letterboxed against the black panel, never cropped. */
.video-lightbox__video {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* Pinned to the panel's top-right, mirroring .candidate-drawer__top-controls.
⚠️ Unlike every other close button in the app, this one sits on VIDEO, not on
a themed surface - so it cannot rely on --text-primary against --bg-base and
carries its own scrim and light ink in both themes. Without this it is
invisible on any pale frame. The 44x44 hit area comes from .btn-icon. */
.video-lightbox__close {
position: absolute;
top: var(--space-3);
right: var(--space-3);
z-index: 2;
color: var(--color-white);
background: rgba(6, 27, 49, 0.55);
border-radius: var(--radius-full);
}
/* ⚠️ `:not(:disabled)` is REQUIRED here, not decoration. `.btn-icon:hover:not(
:disabled)` (0,3,0) sets `background: var(--bg-surface)`, which out-specifies
a plain `.video-lightbox__close:hover` (0,2,0) - the scrim would be replaced
by a pale surface fill on hover and the white glyph would disappear against
it. Matching the selector's specificity is what keeps the scrim. */
.video-lightbox__close:hover:not(:disabled) {
background: rgba(6, 27, 49, 0.8);
color: var(--color-white);
}
/* design.md §4.5. The panel still appears and disappears, just without the
scale/fade - the resting state is the visible one, and video-lightbox.js
reads the same query so it also skips the exit delay. The shared
.drawer-backdrop is already covered by the reduced-motion block above. */
@media (prefers-reduced-motion: reduce) {
.video-lightbox:not([hidden]):not(.is-closing) .video-lightbox__panel,
.video-lightbox.is-closing .video-lightbox__panel {
animation: none;
}
}
/* =========================================================================
* CV Viewer (assets/js/lib/cv-viewer.js, components.md §104, design.md §10)
* -------------------------------------------------------------------------
* Displays the candidate's ACTUAL CV file - PDF in the browser's native viewer,
* DOCX rendered by docx-preview - above the Candidate Detail Drawer. Opened by
* the drawer's View CV button; replaces the old in-drawer resume panel.
*
* Built and torn down in JS (like .resume-viewer-overlay), so there is no
* authored markup and no [hidden] state to style here.
*
* ⚠️ CLOSES ON THE × ONLY - a documented exception to design.md §10, where
* every other overlay dismisses on backdrop click and Escape. The dimmer is
* therefore purely visual here; cv-viewer.js binds no listener to it.
* ========================================================================= */
.cv-viewer {
position: fixed;
inset: 0;
/* Above --z-drawer: this opens FROM the candidate drawer and must sit over
it, matching the video lightbox's use of the modal layer. */
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
/* Unlike the video lightbox, hit-testing is NOT disabled here: there is no
click-through-to-dismiss behaviour to preserve, and leaving the container
live means a stray click outside the panel lands harmlessly on it instead
of reaching the drawer underneath. */
}
/* Tall and portrait-ish: a CV is a paged A4 document, so the panel is shaped
to show a page rather than a video frame. */
.cv-viewer__panel {
display: flex;
flex-direction: column;
width: min(900px, 94vw);
height: min(92vh, 1100px);
overflow: hidden;
border-radius: var(--radius-lg);
background: var(--bg-base);
box-shadow: var(--shadow-xl);
}
/* Same shape as .resume-viewer-overlay__header - heading left, close right. */
.cv-viewer__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
flex-shrink: 0;
padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
border-bottom: 1px solid var(--border-default);
}
/* Groups the name + provenance sub-line so both sit left of the close button
as one flex item (components.md §104). */
.cv-viewer__heading {
min-width: 0;
}
.cv-viewer__title {
font-weight: 600;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Provenance sub-line (components.md §103/§104) - "uploaded by the employee" vs
"built using Vanceli's built-in CV tool", same copy cvSourceMessage() feeds
the drawer's sticky message above the CV buttons. */
.cv-viewer__subtitle {
margin: var(--space-1) 0 0;
font-size: var(--text-sm);
color: var(--text-secondary);
}
/* THE scroll box. `min-height: 0` is load-bearing, not habit: a flex child's
automatic minimum size is its content, so without it a long document would
push the panel taller than the viewport instead of scrolling inside it. */
.cv-viewer__body {
flex: 1;
min-height: 0;
overflow: auto;
/* Neutral grey gutter around the white page, the convention every PDF reader
uses. Fixed rather than tokenised: it frames DOCUMENT content (below), not
app chrome. */
background: #525659;
}
/* The PDF path: the browser's own viewer, with its own scrolling, zoom and
search. `border: 0` because an iframe ships a default border. */
.cv-viewer__frame {
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* The DOCX path. docx-preview injects its own page elements and stylesheet;
this only centres them and stops a wide document forcing horizontal scroll on
the whole panel. */
.cv-viewer__docx {
padding: var(--space-4) 0;
}
.cv-viewer__docx .docx-wrapper {
background: transparent;
padding: 0;
}
/* ⚠️ The rendered page must stay WHITE IN BOTH THEMES. It is a document, not
app surface - an employer downloading this CV gets a white page, and a
dark-mode preview that disagreed with the file would be actively misleading.
Same reason the PDF iframe is left entirely alone. */
.cv-viewer__docx .docx {
margin: 0 auto var(--space-4);
background: #fff;
color: #000;
box-shadow: var(--shadow-lg);
max-width: 100%;
}
/* Loading and error states, centred in the grey gutter. */
.cv-viewer__status {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-4);
height: 100%;
padding: var(--space-6);
text-align: center;
color: var(--color-white);
}
@media (max-width: 599px) {
.cv-viewer {
padding: 0;
}
.cv-viewer__panel {
width: 100%;
height: 100%;
border-radius: 0;
}
}
/* Close (x) - pinned to the drawer's top-right at every scroll depth.
---------------------------------------------------------------------------
This REVERSES the earlier "plain position: static, floated, scrolls away
with the content" treatment (see components.md §25). The redesigned header
is sticky, so a close control that scrolled out from under it read as an
inconsistency; Esc/backdrop remain available regardless, but the visible
affordance now matches them.
`position: fixed` rather than `sticky` because this button is a DOM sibling
of #drawer-profile/#drawer-resume (one button serves both views), so it has
no sticky-positioning parent that spans the scroll box. .candidate-drawer
sets a `transform`, which makes it the containing block for fixed
descendants - so these offsets resolve against the drawer, not the
viewport, and hold at both the 480px and the full-width mobile size.
.candidate-drawer__header reserves padding-right so nothing runs under it.
Glyph stays 20px via the shared --icon-size-close rule; the 44x44 hit area
is unchanged (design.md §3.7/§4.4). */
/* ---- Top-right controls: bookmark + close (components.md §25) ----
The FIXED positioning lives on this wrapper now, not on .candidate-drawer__close
itself. The bookmark moved out of the action footer to sit immediately left of
the ×, matching the Candidate Card, where the same pair is already pinned
top-right (§23).
The wrapper is built in JS (candidate-drawer.js) rather than authored in the
three host pages - see the note there. `gap: 0` with the buttons' own padding
supplying the separation is the same treatment .candidate-card__top-right
uses, so the two clusters read identically. */
.candidate-drawer__top-controls {
position: fixed;
top: var(--space-4);
right: var(--space-4);
z-index: 2;
display: flex;
align-items: center;
gap: 0;
}
/* Both glyphs at 20px. The close × already gets that from the shared
overlay-close rule near the top of this file; the bookmark needs its own,
or it would inherit .btn-icon's default and sit visibly smaller beside it.
The 44x44 hit areas are untouched (design.md §3.7/§4.4). */
.candidate-drawer__shortlist-btn svg {
width: var(--icon-size-close);
height: var(--icon-size-close);
}
/* Its `.is-shortlisted` accent tint is NOT declared here - it shares one rule
with the card's bookmark further up this file, so the two can never drift. */
/* Needed because the button is toggled with the `hidden` attribute in the CV
view: .btn-icon sets `display: inline-flex`, which outranks the UA's
[hidden] { display: none } and would leave it visible. Same trap
.advanced-search__group-clear documents (§80). */
.candidate-drawer__shortlist-btn[hidden] {
display: none;
}
/* Sticky header (components.md §25) - identity block + contact row stay
pinned while the sections scroll under them.
---------------------------------------------------------------------------
Full-bleed via the same negative-margin technique as the sticky footer
below: cancel .candidate-drawer's side padding with negative left/right
margin, then restore it as this element's own padding, so the background
spans edge to edge. .candidate-drawer's `overflow-x: hidden` keeps the
bleed from producing a horizontal scrollbar. The background must be opaque
or scrolled content shows through. padding-right clears the fixed top-right
cluster, which is now TWO 44px targets (bookmark + close) plus a gap, not
one - widen this if a third control ever joins them, or the identity block's
name will run underneath. */
.candidate-drawer__header {
position: sticky;
/* NOT `top: 0`. A sticky offset resolves against the scroll container's
PADDING edge, and .candidate-drawer has var(--space-6) of top padding -
so `top: 0` pins the header 32px below the drawer's true top edge and
leaves a gap that scrolled content shows through. Cancelling the
padding here pins it flush to the border edge instead, which is also
exactly where its negative top margin already places it at rest. */
top: calc(-1 * var(--space-6));
z-index: 1;
margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-5)) var(--space-5);
padding: var(--space-5) var(--space-5) var(--space-4);
padding-right: calc(88px + var(--space-4));
background: var(--bg-base);
border-bottom: 1px solid var(--border-default);
}
/* Identity block. Also used, unsticky, by the candidate's own Profile screen
preview (assets/js/pages/candidate-profile.js, components.md §57) - hence
the `.candidate-profile__` namespace rather than a drawer-only one. */
.candidate-profile__header {
display: flex;
align-items: center;
gap: var(--space-4);
}
.candidate-profile__avatar {
width: 64px;
height: 64px;
flex-shrink: 0;
border-radius: var(--radius-full);
object-fit: cover;
background: var(--bg-surface);
}
.candidate-profile__identity {
min-width: 0; /* lets long names ellipsize instead of forcing the flex row wider */
}
/* text-h5/20px - the design.md §2.2 in-app ceiling. The drawer already remaps
--text-h1..h4 to --text-h5 at its root, so this is belt-and-braces for the
Profile-screen copy, which sits inside .dashboard-shell instead. */
.candidate-profile__name {
font-size: var(--text-h5);
line-height: 1.3;
margin: 0;
overflow-wrap: anywhere;
}
.candidate-profile__sub {
font-size: var(--text-sm);
color: var(--text-secondary);
margin: 2px 0 0;
}
/* Role as a quiet pill. Deliberately its own class, not the card's bare
`.candidate-card__role` (which this header used to borrow) - see the CLASS
OWNERSHIP note in candidate-profile-view.js. */
.candidate-profile__role-pill {
display: inline-block;
margin: var(--space-2) 0 0;
padding: 2px var(--space-2);
border: 1px solid var(--accent-tint-border);
border-radius: var(--radius-full);
background: var(--accent-tint);
color: var(--accent-ink);
font-size: var(--text-xs);
font-weight: 600;
}
/* Contact row (components.md §15): the candidate's email and phone in the
drawer's sticky header. Now UNCONDITIONAL - it used to render only once the
employer had revealed the candidate, with a
.candidate-drawer__contact-hidden line standing in otherwise. That gate and
that rule are both gone. */
.candidate-profile__contact {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
margin-top: var(--space-3);
}
.candidate-profile__contact-item {
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
font-size: var(--text-sm);
color: var(--text-secondary);
}
.candidate-profile__contact-item span {
overflow-wrap: anywhere;
}
.candidate-profile__contact-item svg {
width: 14px;
height: 14px;
flex-shrink: 0;
color: var(--icon-muted);
}
/* ---- Send Email, in the sticky header (components.md §25) ----
Moved out of the bottom action bar by product request so it sits directly
under the email/phone row it acts on, and stays reachable at every scroll
depth rather than only at the end of a long profile.
FULL BLEED IS DELIBERATE, AND `width: 100%` IS THE WHOLE MECHANISM.
`.candidate-drawer__header` is a plain BLOCK (not flex - see that rule), so
this button stretches to the header's content box on that one declaration:
no flex container, no `display` override, no alignment rule needed. `.btn`'s
own `display: inline-flex` keeps the glyph and label centred inside the
stretched box.
This reverses the earlier shrink-wrapped `.btn-sm` treatment, which existed
so a full-height primary would not compete with the candidate's name above
it. The drawer now has exactly ONE primary in total - the footer's two CV
actions are both secondary at equal width - so the full bleed is the signal
carrying that hierarchy, and the name holds its own through the type scale.
See the matching note in candidate-drawer.js.
⚠️ IT MUST END UP EXACTLY AS WIDE AS THE FOOTER'S TWO CV BUTTONS COMBINED -
that is the stated requirement, and it is what the arithmetic below targets.
⚠️ THE NEGATIVE MARGIN CANCELS A DIFFERENCE, NOT THE WHOLE PADDING. Two
earlier attempts shipped visibly wrong from the running app:
1. `width: 100%` alone - inset on the right. `.candidate-drawer__header`
reserves `padding-right: calc(88px + var(--space-4))` (104px) to clear
the FIXED top-right cluster (bookmark + close), so its content box stops
104px short while the footer's stops only var(--space-5) (24px) short.
`width: 100%` faithfully filled the SHORTER box.
2. Cancelling the full 104px - the button came out NARROWER still. It
overshot the drawer's own content edge by 24px, and `.candidate-drawer`
carries `overflow-x: hidden`, so the excess was clipped rather than
drawn.
The footer bar is the reference: it bleeds to `calc(-1 * var(--space-5))` and
re-pads by var(--space-5), so its content spans the drawer minus 24px a side.
This button starts 104px short on the right, so it needs back exactly the
DIFFERENCE - 104px minus that same 24px - to land on the identical edge. At
480px drawer width both then measure 432px. Written in terms of the two
tokens rather than as `80px` so it tracks any change to either.
The header's padding itself must NOT be reduced to fix this: it is what keeps
the name and contact rows from running underneath the close button. Only this
button opts out, and only on the right - it clears the cluster by sitting
BELOW it, not beside it. */
.candidate-drawer__email-btn {
/* `flex` not `inline-flex` (.btn's own value): an inline-level box shrink-wraps
to its label, so the negative margin below would just drag the shrink-wrapped
pill rightwards instead of widening it. As a block-level flex container it
fills the line box, which is what makes the bleed work - and `.btn`'s own
`justify-content: center` still centres the glyph + label inside it. */
display: flex;
/* ⚠️ THE WIDTH AND THE MARGIN MUST BOTH BE STATED, AND THE WIDTH MUST INCLUDE
THE RECLAIMED SPACE. Three earlier attempts each failed in a different way,
all confirmed by measuring the running app in a headless browser:
1. `width: 100%` alone -> 352px: filled the header's SHORT
content box, inset ~80px on the right.
2. negative margin, no width -> 151px: `.btn` sets no width and a
flex box still sizes to its content,
so the margin only SHIFTED the
shrink-wrapped pill rightwards.
3. `width: 100%` + margin -> 351px: `100%` fixes the used width
outright, so the margin could not
widen it - it moved the right edge
and left the same 80px shortfall.
`100%` plus the reclaimed difference is what actually spans the footer's
width: the header's content box (drawer - 24px - 104px) plus the 80px the
margin pulls back = the footer's box (drawer - 24px - 24px). Measured 431px
against the footer's 431px at 480px drawer width, and 331px vs 331px at the
380px breakpoint. */
width: calc(100% + (88px + var(--space-4) - var(--space-5)));
margin-top: var(--space-3);
margin-right: calc(-1 * (88px + var(--space-4) - var(--space-5)));
}
/* ---- Classifications section (components.md §56/§87, design.md §9) ----
Sits between the facts box and Skills in the Candidate Detail Drawer. One
group per classification: a bold name over a quiet middot-joined line of that
classification's sub-classifications.
Deliberately NOT chips. design.md §9 already specifies middot-joined text for
classifications on the candidate row, and a chip treatment here would read as
skills - which sit directly below this section. The name/sub-line pair is
what carries the parent/child relationship the flat namespaced values encode.
The sub-line is the one value in this panel allowed to soft-wrap rather than
ellipsize (same rule as the card's classifications row): taxonomy names are long,
and truncating one would hide which specialisation a candidate actually
chose. */
.candidate-profile__classification-group {
margin-bottom: var(--space-3);
}
.candidate-profile__classification-group:last-child {
margin-bottom: 0;
}
.candidate-profile__classification-name {
margin: 0;
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-primary);
}
.candidate-profile__sub-classifications {
margin: 2px 0 0;
font-size: var(--text-sm);
color: var(--text-secondary);
overflow-wrap: anywhere;
}
/* "Assessment Status: " line - shown above the facts panel (see
candidate-profile-view.js, components.md §25). */
.candidate-profile__assessment-status {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: 600;
margin: 0 0 var(--space-5);
}
/* Facts panel: location+timezone / work mode * employment type / cumulative
experience. Boxed so it reads as one unit of "hard facts" separate from the
narrative sections below. */
.candidate-profile__facts {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-6);
padding: var(--space-4);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
background: var(--bg-surface);
}
.candidate-profile__fact {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--text-sm);
color: var(--text-secondary);
}
.candidate-profile__fact svg {
width: 16px;
height: 16px;
flex-shrink: 0;
margin-top: 2px;
color: var(--icon-muted);
}
.candidate-profile__section {
margin-bottom: var(--space-6);
}
/* Uppercase overline section header (text-xs per the redesign spec). Replaces
the previous text-base + underline treatment. */
.candidate-profile__overline {
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-secondary);
margin: 0 0 var(--space-3);
}
/* ---- Skills ----
⚠️ THE TWO-COLUMN "name + N yrs" LIST IS GONE, and with it
.candidate-profile__skills / __skill-row / __skill-name / __skill-years.
It was a hairline-separated row per skill with a right-aligned, tabular-nums
year count. There is no year count any more: skills are no longer
collected as name+years pairs at all. A candidate attaches skills to each
individual JOB, and the set an employer sees is the derived union of those
(assets/js/lib/candidate-derived.js#cumulativeSkills) - names only.
The drawer now renders them through .candidate-profile__entry-skills below
(the same `.chip.chip-static` pills the per-job entries use), so the
cumulative set and the per-job sets read as one vocabulary.
The old comment here explained why there was deliberately NO proficiency bar
- that reasoning outlived the rules it guarded and is now moot: there is no
`years` field left to be tempted into drawing one from. If a real proficiency
field is ever added, design.md §4.6 still applies - pair any bar with its
numeric value, colour/length is never the only signal. ---- */
/* ---- Work experience timeline. The rail and node markers are pure
decoration drawn with a border and a ::before dot - the entries stay plain
semantic elements, so the history reads identically with CSS off or in a
screen reader. list-style is cleared explicitly because this is an
(chronological history is genuinely ordered) and base.css styles lists. ---- */
.candidate-profile__timeline {
list-style: none;
margin: 0;
padding: 0;
}
.candidate-profile__timeline-item {
position: relative;
margin: 0;
padding: 0 0 var(--space-5) var(--space-5);
border-left: 1px solid var(--border-default);
}
/* Last entry: stop the rail at the final node instead of running past it. */
.candidate-profile__timeline-item:last-child {
padding-bottom: 0;
border-left-color: transparent;
}
.candidate-profile__timeline-item::before {
content: "";
position: absolute;
left: -4.5px;
top: 6px;
width: 8px;
height: 8px;
border-radius: var(--radius-full);
background: var(--accent);
/* Ring in the drawer's own background so the dot reads as sitting ON the
rail rather than being crossed by it. */
box-shadow: 0 0 0 3px var(--bg-base);
}
.candidate-profile__entry {
margin-bottom: var(--space-4);
}
.candidate-profile__entry:last-child {
margin-bottom: 0;
}
.candidate-profile__entry-title {
font-weight: 700;
font-size: var(--text-sm);
}
.candidate-profile__entry-meta {
font-size: var(--text-xs);
color: var(--text-secondary);
margin: 2px 0 var(--space-2);
}
.candidate-profile__entry-body {
font-size: var(--text-sm);
}
/* Per-entry skill chips (work experience). Own namespace rather than the
card's `.candidate-card__skills`. */
.candidate-profile__entry-skills {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
margin-top: var(--space-2);
}
.candidate-drawer__actions {
/* Sticky footer: stays pinned to the bottom of the drawer's own scroll box
while the content scrolls underneath it. .candidate-drawer has no bottom
padding of its own (see that rule) specifically so this can sit flush with
the true bottom edge via a plain `bottom: 0` - this bar supplies its own
bottom padding (var(--space-6)) instead, so there's still comfortable
breathing room below the buttons. Horizontal bleed (full width) uses
negative left/right margin to cancel the drawer's side padding.
⚠️ SERVES BOTH DRAWER VIEWS. It was the profile view's footer only; the CV
view now renders the same class for its "Download CV" bar (components.md
§26), so any change here lands on both.
⚠️ THE BACKGROUND MUST STAY FULLY OPAQUE. `--bg-base` is a solid colour in
both themes and that is load-bearing, not incidental: content scrolls
directly beneath this bar, and any alpha, tint or backdrop-filter here
means text visibly runs through the buttons. */
position: sticky;
bottom: 0;
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
margin: var(--space-5) calc(-1 * var(--space-5)) 0;
padding: var(--space-4) var(--space-5) var(--space-6);
background: var(--bg-base);
border-top: 1px solid var(--border-default);
}
/* ---- Full-bleed 50/50 split (components.md §25) ----
The profile view's bar spans edge-to-edge, divided equally between its two
buttons - by id, not by class, since the split is a two-specific-buttons
layout, not a reusable pattern. If the third (assessment) action is ever
un-hidden the footer's shape needs a fresh decision; these rules do not
attempt to guess it.
The split was 40/60 when this bar held one primary and one secondary. Both
buttons are secondary now (the drawer's one primary is Send Email, up in the
sticky header), so there is no hierarchy left for unequal widths to express.
THE RATIO IS THE ONLY THING THAT CHANGED - every word below about the
flex-basis still holds exactly as written.
⚠️ THE `0` FLEX-BASIS IS WHAT STOPS THE ROW WRAPPING. Do not "restore" a
percentage basis here. CSS Flexbox decides line-wrapping (spec §9.3) BEFORE
flex-shrink is resolved, using each item's un-shrunk hypothetical size - so
with any percentage basis the two hypothetical sizes plus the row's own
`gap: var(--space-2)` must fit the container, and 100% of any split + 8px does
not. The wrap algorithm then drops the second button onto its own line where,
alone with `flex-grow`, it stretches to full width: one button stacked above a
full-width other. That was the reported bug. (It was first hit with the 40/60
split this bar used to carry, but nothing about it is specific to that ratio -
an even 50/50 in percentages overflows by the same 8px.)
A previous fix reserved the gap inside each basis (`calc(40% - 4px)` /
`calc(60% - 4px)`) so the two sums landed on exactly the content width. It
worked, but only with ZERO rounding slack, and it was verified in Chromium
only - an engine that rounds percentage bases differently can tip it back
over. It also silently broke if `--space-2` changed, since the `4px` was a
hardcoded half of it.
A basis of `0` removes the arithmetic entirely: each item's hypothetical size
is 0, so `0 + 0 + gap` can never exceed the container and the wrap check
cannot fail - at any width, zoom, device pixel ratio or engine. The free
space (content width minus the gap) is then divided by the GROW RATIO, which
is where the split actually lives - derived, instead of hardcoded as a width.
`min-width: 0` on both is load-bearing and unrelated to the above: a
`flex-basis: 0` does NOT override an item's automatic minimum size, so
without it each button still refuses to shrink below its own min-content and
would overflow sideways in a narrow drawer. Same reasoning as the 50% column
split at :490 in this file. */
/* ⚠️ THE IDS CHANGED WITH THE §26 REWORK, THE FLEX MATH DID NOT.
The bar used to hold [View CV | Send Email] (#drawer-resume-btn /
#drawer-email-btn). Send Email moved into the sticky header and the CV view
became its own overlay, so the bar now holds the two CV actions:
[Download CV | View CV], now at an even split since both are secondary. Every
word of the wrap reasoning above still applies - only the selectors were
repointed and the grow ratio evened out. #drawer-resume-btn no longer exists
anywhere; do not resurrect it.
Both buttons are always active now - every employee has a CV, so there is
no disabled-state wrapper span to size any more (the old
.candidate-drawer__cv-tip:has() rules were removed with it). */
#drawer-download-cv-btn,
#drawer-view-cv-btn {
flex: 1 1 0;
min-width: 0;
}
/* Sticky provenance message (components.md §25/§103) - the FIRST child of
.candidate-drawer__actions, above the two buttons. flex-basis: 100% on a
flex-wrap row is what forces it onto its own line without a fixed height;
the buttons then wrap below it exactly as they would on a narrow drawer.
Deliberately NOT an .alert - a tinted alert background inside this bar's
opaque .candidate-drawer__actions surface would read as a second stacked
surface. This is a quiet caption instead, same weight as .sample-notice. */
.candidate-drawer__cv-source {
flex-basis: 100%;
display: flex;
align-items: flex-start;
gap: var(--space-2);
margin: 0 0 var(--space-1);
font-size: var(--text-sm);
color: var(--text-secondary);
}
.candidate-drawer__cv-source svg {
width: 16px;
height: 16px;
flex-shrink: 0;
margin-top: 1px;
}
/* `.candidate-drawer__primary-action` was REMOVED here (components.md §25). It
pushed the footer bar's one primary to the far right with `margin-left: auto`,
back when that bar held a primary at all. It doesn't: the drawer's single
primary is Send Email in the sticky header, and both CV buttons in the footer
are secondary at equal flex. The last element carrying the class was View CV,
which no longer does, so the rule styled nothing. Do not re-add it looking for
a "one primary" marker in this bar - the marker for that is the header button.
The footer's shortlist bookmark rule that used to sit here is GONE - the
bookmark moved to the fixed top-right cluster (.candidate-drawer__top-controls
above), which carries its own 20px glyph sizing. The footer holds only real
`.btn`s now, so the shared `.btn svg` rule covers everything in it. */
/* `.candidate-drawer__contact-hidden` was REMOVED here. It styled the drawer's
'Hidden - select "Show Contact Details" to reveal' line, which no longer
renders: the reveal gate over name/photo/email/phone is retired and the
contact row is unconditional (components.md §15, candidate-drawer.js). */
/* =========================================================================
* Template Builder Drawer (assets/js/lib/template-drawer.js, components.md
* "Template Builder Drawer") - the second concrete Drawer implementation,
* following the Candidate Detail Drawer's conventions above (non-sticky
* close icon, always-visible bottom action bar) but not sharing code with
* it, since the content models are unrelated. Wider than .candidate-drawer
* (560px vs 480px) to comfortably fit the builder's form fields/question
* blocks.
*
* Layout note: unlike .candidate-drawer's "position: sticky" footer (safe
* there only because a candidate profile's content reliably exceeds the
* viewport height), a freshly-created template can be SHORT (one question,
* or none yet) - a sticky-within-scroll-container footer would then overlap
* the "Add Question" buttons underneath it (confirmed empirically:
* elementFromPoint() at the button's coordinates resolved to the footer,
* silently swallowing clicks). Fixed with a more robust flex layout instead:
* .template-drawer is a column flex container, .template-drawer__scroll is
* the ONLY scrolling region (flex:1), and .template-drawer__actions is a
* plain flex sibling OUTSIDE that scroll region - structurally incapable of
* overlapping content regardless of how little/much of it exists.
* .template-drawer__header is a third sibling on the same principle, so the
* eyebrow/title/close row stays put without position:sticky.
* ========================================================================= */
.template-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 560px;
max-width: 100vw;
background: var(--bg-base);
border-left: 1px solid var(--border-default);
box-shadow: var(--shadow-xl);
z-index: var(--z-drawer);
display: flex;
flex-direction: column;
}
/* Slide-in, reusing the @keyframes drawer-in/out defined for .candidate-drawer
above - including the reason they are keyframes on the VISIBLE state rather
than a transition out of an off-screen default (see that block's note: a
stalled animation must never leave an open, focus-trapped drawer parked off
screen). Entrance only: unlike candidate-drawer.js, this controller hides the
element synchronously in actuallyClose(), and routing that through an exit
animation would mean delaying the close behind the §32 discard confirmation.
Reduced motion is handled by the shared @media block above. */
.template-drawer:not([hidden]) {
animation: drawer-in var(--duration-slow) var(--ease-out);
}
.template-drawer[hidden] {
display: none;
}
@media (max-width: 699px) {
.template-drawer {
width: 100%;
}
}
.template-drawer__header {
flex-shrink: 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-6) var(--space-5) var(--space-4);
border-bottom: 1px solid var(--border-default);
}
.template-drawer__heading-group {
min-width: 0; /* lets a long template name wrap instead of pushing the close button off-edge */
}
.template-drawer__eyebrow {
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
margin-bottom: var(--space-1);
}
/* No font-size here on purpose: .template-drawer is an in-app type-cap root
(see the remap near the top of this file), so h2 already resolves to
--text-h5 / 20px. Hardcoding a larger value would break design.md §2.2. */
.template-drawer__header h2 {
margin-bottom: 0;
}
.template-drawer__close {
flex-shrink: 0;
margin-right: calc(var(--space-2) * -1); /* optically aligns the 44px hit box's glyph with the content edge */
}
.template-drawer__scroll {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: var(--space-5);
}
.template-drawer__section {
margin-bottom: var(--space-6);
}
.template-drawer__section h3 {
font-size: var(--text-base);
margin-bottom: var(--space-3);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--border-default);
}
.template-drawer__add-question-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-3);
}
/* Questions empty state - structural, rendered by renderQuestionsList() only
while draft.questions is empty. */
.template-drawer__empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
padding: var(--space-6) var(--space-4);
border: 1.5px dashed var(--border-default);
border-radius: var(--radius-md);
text-align: center;
}
.template-drawer__empty svg {
width: 24px;
height: 24px;
color: var(--icon-muted);
margin-bottom: var(--space-1);
}
.template-drawer__empty-title {
font-weight: 600;
color: var(--text-primary);
}
.template-drawer__question-block {
padding: var(--space-4);
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
background: var(--bg-surface);
margin-bottom: var(--space-3);
}
.template-drawer__question-header {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.template-drawer__question-type {
min-width: 0;
display: inline-flex;
align-items: center;
padding: 2px var(--space-2);
border-radius: var(--radius-full);
background: var(--bg-elevated);
border: 1px solid var(--border-default);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-secondary);
}
.template-drawer__question-number {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: var(--radius-full);
background: var(--accent);
color: var(--accent-text-on);
font-size: var(--text-xs);
font-weight: 600;
}
/* margin-left:auto pushes the delete button to the far edge - the pill stays
its natural width, which `flex:1` on the pill would have stretched. */
.template-drawer__question-header .btn-icon {
margin-left: auto;
flex-shrink: 0;
}
.template-drawer__options {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-top: var(--space-3);
}
.template-drawer__option-row {
display: flex;
align-items: center;
gap: var(--space-2);
}
.template-drawer__option-row .field__control {
flex: 1;
min-width: 0;
height: 40px;
}
/* Decorative type cue only (radio for single-choice, checkbox for multiple) -
disabled and aria-hidden in the markup, so this is styling for something the
author reads but never operates. Kept at full opacity despite :disabled, as
it is a legend rather than an unavailable control. */
.template-drawer__option-affordance {
flex-shrink: 0;
width: 16px;
height: 16px;
accent-color: var(--accent);
opacity: 1;
}
.template-drawer__add-option-btn {
margin-top: var(--space-2);
}
.template-drawer__file-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border: 1px solid var(--border-default);
border-radius: var(--radius-xs);
margin-bottom: var(--space-2);
font-size: var(--text-sm);
}
.template-drawer__file-row span {
display: flex;
align-items: center;
gap: var(--space-2);
}
.template-drawer__file-row svg {
/* Size (20px) comes from the shared builder-icon rule below (design.md §3.7
/ components.md §41 - was 16px); this keeps only the muted color + no
shrink so the file glyph and the remove-x row stay aligned. */
color: var(--icon-muted);
flex-shrink: 0;
}
/* Reference-files dropzone. Modelled on .resume-dropzone (further down this
file) rather than sharing it: that one owns upload progress/success/error
states this prototype has no use for, since reference files here are
metadata-only (see template-drawer.js's backend note). */
.template-drawer__dropzone {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
padding: var(--space-6) var(--space-4);
border: 1.5px dashed var(--border-default);
border-radius: var(--radius-md);
background: var(--bg-surface);
text-align: center;
transition: border-color var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out);
}
.template-drawer__dropzone svg {
/* Size (20px) comes from the shared builder-icon rule below (design.md §3.7
/ components.md §41 - was 24px). */
color: var(--icon-muted);
}
/* ---- Builder icon glyphs -> 20px, single source (design.md §3.7,
components.md §41) ----
Every FUNCTIONAL icon in the scrolling body - the question-card trash, the
option / file remove x, the three Add-question pluses, the inline Add Option
plus, the dropzone upload glyph, and the file-row file glyph - resolves to
the shared 20px icon size through this ONE rule, so no per-icon size can
drift out of step again. --icon-size-close IS design.md §3.7's 20px icon
default (the doc frames it as the one size that must stay consistent across
overlays), reused here as that canonical 20px token; it is theme-independent,
so light + dark stay in parity automatically. The old per-context sizes on
.template-drawer__file-row svg (16px) and .template-drawer__dropzone svg
(24px) were dropped above so this is the sole sizer.
The :where() list scopes the rule to the button / dropzone / file-row glyphs
and deliberately EXCLUDES the empty-state clipboard illustration (kept at
24px as a decorative placeholder) and the option-row radio/checkbox cues and
sharing switches (form controls, not svgs - untouched).
GLYPH ONLY (design.md §4.4): the icon buttons keep their fixed 44x44
.btn-icon hit box and the add-buttons keep their layout - only the visible
svg grows, the clickable box is unchanged. The header close x is sized by the
separate shared --icon-size-close rule (§31) and is already 20px. */
.template-drawer__scroll
:where(.btn, .btn-icon, .template-drawer__dropzone, .template-drawer__file-row)
svg {
width: var(--icon-size-close);
height: var(--icon-size-close);
}
.template-drawer__dropzone.is-dragover {
border-color: var(--accent);
background: var(--bg-elevated);
}
.template-drawer__dropzone-text {
color: var(--text-secondary);
}
/* The two sharing flags now use the shared .switch component (design.md §8);
only the row rhythm is drawer-local. */
.template-drawer__section .switch + .switch {
margin-top: var(--space-2);
}
.template-drawer__actions {
/* A plain flex sibling of .template-drawer__scroll (not inside it, not
position:sticky) - see the .template-drawer layout note above for why
this is more robust than the sticky-within-scroll-container technique. */
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
flex-wrap: wrap;
padding: var(--space-4) var(--space-5) var(--space-6);
background: var(--bg-base);
border-top: 1px solid var(--border-default);
}
/* ---- Resume view (plain, ATS-friendly, single column) ---- */
.resume-view {
/* Clearance for the CV view's OWN sticky footer (the "Download CV" bar,
components.md §26). candidate-drawer.js renders that bar as a SIBLING of
this element, not a child, precisely so this padding can push the last CV
section clear of it - a footer nested inside its own spacer would just be
pushed down by it. The value matches .candidate-drawer__actions' bottom
padding.
(It previously existed for the opposite reason: the resume view had no
footer at all, and this stood in for the bottom padding .candidate-drawer
deliberately does not carry.) */
padding-bottom: var(--space-6);
}
.resume-view h2 {
margin-bottom: 2px;
}
.resume-view__subtitle {
color: var(--text-secondary);
margin-bottom: var(--space-5);
}
.resume-view section {
margin-bottom: var(--space-5);
}
.resume-view h3 {
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
margin-bottom: var(--space-2);
}
.resume-view ul {
list-style: disc;
padding-left: var(--space-5);
}
.resume-view li {
margin-bottom: var(--space-1);
font-size: var(--text-sm);
}
/* =========================================================================
* Pagination (design.md §6, components.md §27)
* -------------------------------------------------------------------------
* A centred two-part block: a "Showing X-Y of Z" status line above a single
* rounded --bg-surface pill holding prev arrow / page buttons / ellipses /
* next arrow. Rendered by assets/js/lib/pagination.js.
*
* Sizing (design.md §7 / §4.4): the visible controls are a compact 38px - one
* notch under the `sm` 32px..`md` 40px band - deliberately smaller than the
* 44px touch-target floor so a 7-page run stays a single readable pill rather
* than a 320px-wide slab. The §4.4 floor is met with the invisible-padding
* pattern instead: each button paints at 38px but carries a transparent 44x44
* ::after hit overlay. The 6px gap between controls is not decorative - it is
* exactly what keeps two adjacent 44px overlays from colliding (38 + 6 = 44).
* ========================================================================= */
.pagination {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-6);
}
.pagination[hidden] {
display: none;
}
/* Status line. Numbers are emphasised (--text-primary / 600) against quiet
surrounding text, and tabular figures stop the digits jittering as the page
changes (design.md §2.1). */
.pagination__summary {
font-size: var(--text-xs);
color: var(--text-secondary);
margin: 0;
font-variant-numeric: tabular-nums;
}
.pagination__summary strong {
color: var(--text-primary);
font-weight: 600;
}
/* The controls pill. */
.pagination__controls {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
justify-content: center;
padding: var(--space-1);
border: 1px solid var(--border-default);
border-radius: var(--radius-full);
background: var(--bg-surface);
box-shadow: var(--shadow-sm);
}
.pagination__page,
.pagination__arrow {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 var(--space-2);
border-radius: var(--radius-full);
border: 1px solid transparent;
background: transparent;
color: var(--text-secondary);
font-size: var(--text-sm);
font-weight: 600;
font-variant-numeric: tabular-nums;
cursor: pointer;
}
/* §4.4 invisible hit area - centred on the visible 38px box, extends 3px past
each edge to 44x44. Purely a hit target: no paint, no layout effect. */
.pagination__page::after,
.pagination__arrow::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 44px;
min-width: 44px;
transform: translate(-50%, -50%);
}
.pagination__page:hover,
.pagination__arrow:hover:not([aria-disabled="true"]) {
background: var(--accent-tint);
color: var(--accent-ink);
}
/* Current page - a solid filled button. --accent / --accent-text-on is the
§7 Primary pairing and clears 4.5:1 in both modes (13.75:1 in dark). */
.pagination__page.is-current,
.pagination__page.is-current:hover {
background: var(--accent);
color: var(--accent-text-on);
border-color: var(--accent);
}
/* Arrows - bordered icon buttons, so they read as a distinct control class
from the quiet page numbers. */
.pagination__arrow {
min-width: 38px;
padding: 0;
border-color: var(--border-default);
color: var(--text-primary);
}
.pagination__arrow svg {
width: 18px;
height: 18px;
}
/* Bounds state. aria-disabled, not `disabled`, per design.md §7 - the control
stays in the tab order; pagination.js guards the click. */
.pagination__arrow[aria-disabled="true"] {
opacity: 0.4;
cursor: not-allowed;
}
.pagination__ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 38px;
color: var(--text-secondary);
font-size: var(--text-sm);
user-select: none;
}
/* §4.2 - "radius matched to the element's own radius". base.css's global focus
rule sets radius-xs, which would square off these round controls mid-focus;
restore radius-full. z-index keeps the ring above the neighbouring hit
overlays, which paint later and would otherwise clip it. */
.pagination__page:focus-visible,
.pagination__arrow:focus-visible {
border-radius: var(--radius-full);
z-index: 1;
}
/* =========================================================================
* Empty State (design.md §9)
* ========================================================================= */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-10) var(--space-4);
color: var(--text-secondary);
}
.empty-state[hidden] {
display: none;
}
.empty-state svg {
width: 40px;
height: 40px;
color: var(--icon-muted);
margin-bottom: var(--space-4);
}
.empty-state h2 {
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.empty-state p {
max-width: 48ch;
margin: 0;
}
/* ---- Optional icon TILE (components.md §28, §44) --------------------------
The bare-`` form above (a 40px muted glyph) stays the default and is
what the employer dashboard and Shortlists still use. This variant puts the
glyph in a tinted rounded tile instead, giving the zero-state a focal point
when it sits inside a framed panel (§44's `.assessments-panel`), where a
loose muted glyph reads as an accident rather than a deliberate mark.
⚠️ The `.empty-state svg` rule above is a DESCENDANT selector, so it also
matches the glyph nested in here. `.empty-state__icon svg` at (0,2,1)
out-specifies it at (0,1,1) - both forms therefore keep working, and the
two existing consumers are untouched. */
.empty-state__icon {
display: grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: var(--radius-md);
background: var(--accent-tint);
color: var(--accent-ink);
margin-bottom: var(--space-4);
}
.empty-state__icon svg {
width: 28px;
height: 28px;
/* currentColor, not --icon-muted: the glyph must read against the tinted
tile, and --accent-ink is the token contrast-paired with --accent-tint in
both themes (design.md §1.4). */
color: currentColor;
margin-bottom: 0;
}
/* ---- CTA row (components.md §28) -----------------------------------------
Promoted here from `assets/css/pages/shortlists.css`, where it was first
written, now that a second and third screen need it. Wraps 1-2 buttons so a
zero state can offer a primary action (and optionally a secondary) without
each page re-inventing a one-off `style="margin-top: ..."`. */
.empty-state__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-3);
margin-top: var(--space-4);
}
/* =========================================================================
* Searchable Select Combobox (design.md §8, components.md §51) - a plain
* visible-label single-select combobox, distinct from .country-select (flag+
* dial-code trigger chip) and .multi-select (chips + persistent panel).
* Structurally close to .country-select's own classes/panel/list/option
* pattern, minus anything dial-code-specific, plus an optional "create" row.
* ========================================================================= */
.searchable-select {
position: relative;
width: 100%;
}
.searchable-select__trigger {
width: 100%;
height: 44px;
display: flex;
align-items: center;
gap: var(--space-2);
padding: 0 var(--space-3);
background: var(--bg-base);
border: 1.5px solid var(--border-default);
border-radius: var(--radius-xs);
cursor: pointer;
color: var(--text-primary);
font-size: var(--text-base);
text-align: left;
}
.searchable-select__trigger:focus-visible {
border-color: var(--focus-ring);
}
.searchable-select__trigger:disabled {
background: var(--bg-surface);
color: var(--text-disabled);
cursor: not-allowed;
}
.searchable-select__trigger-label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.searchable-select__trigger svg {
width: 16px;
height: 16px;
margin-left: auto;
color: var(--icon-muted);
flex-shrink: 0;
}
.searchable-select__panel {
position: absolute;
top: calc(100% + var(--space-2));
left: 0;
right: 0;
max-width: 100%;
background: var(--bg-elevated);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
z-index: var(--z-drawer);
padding: var(--space-2);
}
.searchable-select__panel[hidden] {
display: none;
}
.searchable-select__search-wrap {
position: relative;
margin-bottom: var(--space-2);
}
.searchable-select__search-wrap svg {
position: absolute;
left: var(--space-3);
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--icon-muted);
}
.searchable-select__search {
width: 100%;
height: 40px;
padding: 0 var(--space-3) 0 var(--space-8);
border: 1.5px solid var(--border-default);
border-radius: var(--radius-xs);
background: var(--bg-base);
color: var(--text-primary);
}
.searchable-select__options {
max-height: 240px;
overflow-y: auto;
}
.searchable-select__option {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2);
border-radius: var(--radius-xs);
cursor: pointer;
font-size: var(--text-sm);
}
.searchable-select__option:hover,
.searchable-select__option.is-selected {
background: var(--bg-surface);
}
.searchable-select__option--create {
color: var(--accent);
font-weight: 600;
}
.searchable-select__option--create svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.searchable-select__empty {
padding: var(--space-4);
text-align: center;
color: var(--text-secondary);
font-size: var(--text-sm);
}
/* Inline typeahead variant (Country/City, components.md §57 & §51): the field
itself is the text input, so the in-panel search box is hidden and the
trigger button is swapped for a plain bordered `.field__control`-style
input. Suggestions still render in the same `.searchable-select__panel`. */
.searchable-select--inline .searchable-select__input {
width: 100%;
height: 44px;
padding: 0 var(--space-3);
background: var(--bg-base);
border: 1.5px solid var(--border-default);
border-radius: var(--radius-xs);
color: var(--text-primary);
font-size: var(--text-base);
}
.searchable-select--inline .searchable-select__input:focus-visible {
border-color: var(--focus-ring);
}
.searchable-select--inline .searchable-select__input:disabled {
background: var(--bg-surface);
color: var(--text-disabled);
cursor: not-allowed;
}
.searchable-select--inline .searchable-select__input:disabled::placeholder {
color: var(--text-disabled);
}
.searchable-select--inline .searchable-select__search-wrap {
display: none;
}
.searchable-select__option.is-active {
background: var(--bg-surface);
}
/* =========================================================================
* Single-Value Year Slider (design.md §8, components.md §52) - a single
* native range input variant of .range-slider (dual-handle). Same track/
* thumb visual language, one handle, one fill anchored at 0.
* ========================================================================= */
.year-slider {
position: relative;
height: 24px;
margin-bottom: var(--space-2);
}
.year-slider__track {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 4px;
transform: translateY(-50%);
background: var(--border-default);
border-radius: var(--radius-full);
}
.year-slider__fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
background: var(--accent);
border-radius: var(--radius-full);
}
.year-slider__input {
position: absolute;
inset: 0;
width: 100%;
margin: 0;
background: transparent;
-webkit-appearance: none;
appearance: none;
}
.year-slider__input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: var(--radius-full);
background: var(--accent);
border: 2px solid var(--bg-base);
box-shadow: var(--shadow-sm);
cursor: pointer;
margin-top: 3px;
}
.year-slider__input::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: var(--radius-full);
background: var(--accent);
border: 2px solid var(--bg-base);
box-shadow: var(--shadow-sm);
cursor: pointer;
}
.year-slider__input::-webkit-slider-runnable-track,
.year-slider__input::-moz-range-track {
-webkit-appearance: none;
background: transparent;
height: 4px;
}
.year-slider__input:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.year-slider__row {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-1);
}
.year-slider__number {
width: 88px;
flex-shrink: 0;
height: 36px;
padding: 0 var(--space-2);
border: 1.5px solid var(--border-default);
border-radius: var(--radius-xs);
background: var(--bg-base);
color: var(--text-primary);
font-size: var(--text-sm);
}
.year-slider__display {
margin: 0;
color: var(--text-secondary);
font-size: var(--text-xs);
}
.year-slider__input:disabled,
.year-slider__number:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* =========================================================================
* View CV overlay + Upload CV modal (design.md §13, components.md §53)
* -------------------------------------------------------------------------
* ⚠️ CURRENTLY DORMANT - NOT DEAD. These rules style assets/js/lib/
* resume-upload.js, which no longer has an importer: the Candidate Profile's
* CV tab that mounted it was removed, and the module was deliberately KEPT
* because it is the flow the inert "Upload Your CV" button
* (#pf-upload-cv-btn, components.md §85) is intended to open. Do not delete
* either the module or these rules as unused.
*
* Scope note for anyone tidying below: `.resume-tab__actions` and
* `.resume-viewer-overlay*` are exclusive to that dormant module, but
* `.resume-dropzone*` further down is SHARED and LIVE - the candidate
* Assessments screen renders it for attachment uploads
* (candidate-assessment-actions.js). The `.resume-view*` family above is
* likewise live, via the employer's View CV drawer (§26).
* ========================================================================= */
.resume-tab__actions {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
margin-top: var(--space-4);
}
/* ---- View Resume: right-side overlay (same construction pattern as the
Candidate Detail Drawer - a fresh DOM node per open/close, since this is
unrelated chrome, not a persistent candidate-data drawer). ---- */
.resume-viewer-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 480px;
max-width: 100vw;
background: var(--bg-base);
border-left: 1px solid var(--border-default);
box-shadow: var(--shadow-xl);
z-index: var(--z-drawer);
display: flex;
flex-direction: column;
}
.resume-viewer-overlay__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-4);
border-bottom: 1px solid var(--border-default);
flex-shrink: 0;
}
.resume-viewer-overlay__title {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.resume-viewer-overlay__body {
flex: 1;
overflow-y: auto;
padding: var(--space-5);
}
@media (max-width: 599px) {
.resume-viewer-overlay {
width: 100%;
}
}
/* ---- Upload Resume modal: drag-and-drop zone (design.md §8's documented
idle/drag-over/uploading/success/error states - first concrete
drag-and-drop implementation in this codebase; the Assessment Template
Builder's "Add File", components.md §41, is button-only). ---- */
.resume-dropzone {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
padding: var(--space-8) var(--space-4);
border: 1.5px dashed var(--border-default);
border-radius: var(--radius-md);
background: var(--bg-surface);
text-align: center;
transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.resume-dropzone svg {
width: 32px;
height: 32px;
color: var(--icon-muted);
}
.resume-dropzone.is-dragover {
border-color: var(--accent);
background: var(--bg-elevated);
}
.resume-dropzone--success {
border-style: solid;
border-color: var(--color-success);
}
.resume-dropzone--success svg {
color: var(--color-success);
}
/* ---- Notification Feed (Updates screen) ----------------------------------
design.md §10 "Notification center": grouped by day, unread indicator
dot, "Mark all as read" action. Originally page-local to the employer
Updates screen (assets/css/pages/updates.css); promoted here once the
candidate dashboard's Updates screen needed the identical pattern - see
components.md "Notification Row / Date-Group Header" entry. Used on both
dashboard/employer/updates/ and dashboard/candidate/updates/. All values
are design tokens, so light/dark mode and the row's compact-width layout
below are automatic. */
/* NOTE: there was a `.dashboard-main--reading > * { max-width: 720px }` rule
here that capped the whole Updates content column. REMOVED - it was wrong at
the container level. design.md §3.2 specifies dashboards as "fixed sidebar +
FLUID content", and `.dashboard-main` (dashboard-shell.css) is `flex: 1` with
no max-width on every other employer screen; capping only this one left a
wide dead band on the right with the rows hugging the left and the timestamps
stranded mid-row. The feed now fills the spine like every other screen, and
the measure is constrained where it actually belongs - on the message text
itself (see .update-row__message below). components.md §46/§47. */
.updates-page__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
flex-wrap: wrap;
margin-bottom: var(--space-5);
}
.updates-page__header .dashboard-main__title {
margin-bottom: 0;
}
/* Title + unread tally travel together on the left, so they stay paired when
the header wraps and the Mark-all button drops to its own line. */
.updates-page__title-group {
display: flex;
align-items: center;
gap: var(--space-2);
}
/* Live unread count (components.md §47). Accent pill with tabular figures so
it doesn't reflow the title as the count crosses 9 -> 10. Hidden at zero by
the `hidden` attribute, which the page script drives off getUnreadCount(). */
.updates-page__count {
display: inline-grid;
place-items: center;
min-width: 22px;
height: 22px;
padding: 0 var(--space-2);
border-radius: var(--radius-full);
background: var(--accent);
color: var(--accent-text-on);
font-size: var(--text-xs);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.updates-page__count[hidden] {
display: none;
}
/* Shared "this is placeholder data" disclosure (components.md §47, §94).
---------------------------------------------------------------------------
PROMOTED from .updates-page__sample-notice when the Sent Emails screen became
its second consumer - the house rule (components.md §1) is that a block moves
up here the moment more than one screen needs it, and two near-identical
muted-caption rules were exactly the drift that rule exists to prevent.
Deliberately quiet: it is a standing caveat, not an alert, so it takes muted
body text rather than a warning callout. Carries NO margin of its own -
placement differs per screen, so each supplies it via its own modifier
below. */
.sample-notice {
margin: 0;
font-size: var(--text-sm);
color: var(--text-secondary);
}
/* §47 placement: pulled up under the page title, cancelling
.dashboard-main__title's own bottom margin so the caveat reads as part of the
heading block rather than as the first row of the feed. */
.updates-page__sample-notice {
margin: calc(var(--space-5) * -1) 0 var(--space-5);
}
/* ---- Date-group sections ---- */
.update-group {
margin-bottom: var(--space-6);
}
/* design.md §2.2's overline style: text-xs + 0.04em + uppercase via CSS, not
hardcoded capitals, so the accessible name keeps its natural casing. */
.update-group__heading {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-secondary);
margin: 0 0 var(--space-2);
}
/* No inter-row gap - rows are a continuous scannable run, separated by their
own hover fill rather than by whitespace or borders. */
.update-group__list {
list-style: none;
margin: 0;
padding: 0;
}
/* ---- Notification row (components.md §46) ----
* FLAT, not carded. This replaced a bordered `--bg-surface` card per row: at
* feed density the borders read as a stack of separate objects competing for
* attention, where the point of the screen is one continuous list. The row
* now has no chrome at rest and materialises a `--bg-elevated` fill on hover.
*
* The row is a plain holding TWO SIBLING BUTTONS - the mark dot and the
* row body. It is deliberately NOT `role="button"` with a nested control,
* which would be an invalid a11y tree. */
/* Horizontal inset lives HERE, on the row, so the hover fill and the row's
content share the same left/right insets (--space-4 both sides). It used to
live on .update-row__main's padding, which only inset the right side - the
left was set by the mark button's 44px width, leaving the avatar ~52px in
against a 12px right inset. The gap is --space-4 because the mark button's
hit area overhangs into it by exactly that much; see below. */
.update-row {
display: flex;
align-items: center;
gap: var(--space-4);
padding: 0 var(--space-4);
border-radius: var(--radius-lg);
}
.update-row:hover {
background: var(--bg-elevated);
}
/* ---- Static (non-interactive) row - components.md §46/§59 ----
The candidate Notifications feed renders informational rows: no read state
to toggle, nowhere to click through to. The renderer emits them with no
buttons at all (notification-feed.js, `rowConfig.interactive: false`), so
this modifier only has to withdraw the two affordances the base row
advertises - the hover fill and the pointer cursor. A row that lights up
under the cursor is promising a click it cannot honour; design.md §7's rule
that an unavailable control must still "read as not-yet, not broken" is
about controls that EXIST, and there is no control here at all.
Nothing else needs overriding: .update-row__main's own declarations (flex,
min-width, gap, padding, border:0, background:transparent) all apply
unchanged to the that replaces the
. */
.update-row--static,
.update-row--static .update-row__main {
cursor: default;
}
.update-row--static:hover {
background: transparent;
}
/* ---- Mark-as-read button (the unread dot) ----
44x44 target around an 8px dot - the extra area is invisible padding,
exactly as design.md §4.4 prescribes for icon-only controls. Stays MOUNTED
once read (disabled, not removed) so the dot's fade can play and the row's
left edge never jumps; `disabled` also drops it from the tab order once
there is nothing left to mark. */
/* CAUSE OF THE OLD DEEP INDENT: this button was a literal 44x44 box around an
8px dot, so the avatar could never start closer than 44px from the row's
left edge while the right inset was only 12px - badly lopsided, and it read
as the hover bar having a huge left padding (components.md §46).
The VISIBLE box is now --space-3 wide and the 44px target is restored by the
::before overlay below, the same "visible pill smaller than its hit box"
technique §20's filter triggers use. */
.update-row__mark {
position: relative;
flex-shrink: 0;
display: grid;
place-items: center;
width: var(--space-3);
height: 44px;
padding: 0;
border: 0;
background: transparent;
border-radius: var(--radius-full);
cursor: pointer;
}
/* Restores the full 44x44 target (design.md §4.4) without widening the visible
box: 12px + 16px on each side = 44px. The overhang is sized to land exactly
in dead space - the left 16px falls in the row's own padding, the right 16px
in the row's gap - so it never overlaps .update-row__main. That matters:
.update-row__main is a later sibling, so any overlapping region would be
captured by it and the extra hit area would be dead. */
.update-row__mark::before {
content: "";
position: absolute;
inset: 0 calc(var(--space-4) * -1);
}
.update-row__mark:disabled {
cursor: default;
}
.update-row__dot {
width: 8px;
height: 8px;
border-radius: var(--radius-full);
background: var(--accent);
transition:
opacity var(--duration-base) var(--ease-out),
transform var(--duration-base) var(--ease-out);
}
/* Read rows retract the dot rather than removing it - see the mount note
above. This is the one place the design leans on opacity, and it is safe
because the dot carries no text (design.md §4.1 governs text contrast). */
.update-row:not(.is-unread) .update-row__dot {
opacity: 0;
transform: scale(0.4);
}
@media (prefers-reduced-motion: reduce) {
.update-row__dot {
transition: opacity var(--duration-base) var(--ease-out);
transform: none;
}
.update-row:not(.is-unread) .update-row__dot {
transform: none;
}
}
/* ---- Row body: the click-through target ---- */
.update-row__main {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: var(--space-3);
/* Vertical only - the horizontal inset moved up to .update-row so the hover
fill and the content share it symmetrically (components.md §46). */
padding: var(--space-2) 0;
border: 0;
background: transparent;
border-radius: var(--radius-lg);
font-family: inherit;
text-align: left;
cursor: pointer;
}
/* ---- Avatar tile + corner event badge ----
The tile answers "what is this about", the badge "what happened". Employer
rows show the candidate's silhouette; candidate rows, which name nobody,
show the assessment. Never initials - the subject's name, where there is
one, is already in the message beside it. */
.update-row__tile {
position: relative;
flex-shrink: 0;
display: block;
}
.update-row__avatar {
width: 40px;
height: 40px;
}
.update-row__avatar svg {
width: 20px;
height: 20px;
}
/* Solid semantic fill + an on-colour glyph, ringed in the page background so
it reads as a separate object sitting on the avatar rather than a hole in
it. The ring follows the row's hover fill so the seam doesn't reappear.
These use the FOREGROUND semantic tokens only. The matching `--color-*-bg`
tokens are deliberately avoided: they are not overridden for dark mode, so
e.g. `.badge-success` there is light mint on pale mint - survivable at card
size, illegible at 18px. Colour is always paired with a glyph, never the
sole signal (design.md §1.3). */
.update-row__badge {
position: absolute;
right: -3px;
bottom: -3px;
display: grid;
place-items: center;
width: 18px;
height: 18px;
border-radius: var(--radius-full);
box-shadow: 0 0 0 2px var(--bg-base);
}
.update-row:hover .update-row__badge {
box-shadow: 0 0 0 2px var(--bg-elevated);
}
.update-row__badge svg {
width: 11px;
height: 11px;
}
/* Employer events */
.update-row__badge--completed {
background: var(--color-success);
color: var(--bg-base);
}
.update-row__badge--accepted {
background: var(--color-info);
color: var(--bg-base);
}
/* Candidate events */
.update-row__badge--available {
background: var(--color-info);
color: var(--bg-base);
}
.update-row__badge--deadline {
background: var(--color-warning);
color: var(--bg-base);
}
/* ---- Message ----
Running prose = body copy, so text-sm per design.md §2.2's in-app paragraph
rule. Only the subject's name is bolded, via from the renderer. */
/* The measure cap lives here, not on the content column. Now that the feed
fills the fluid spine (design.md §3.2), an uncapped message would run
edge-to-edge on a wide monitor; 68ch keeps it readable while the row itself
still spans the full width so the timestamp can pin to the true right edge.
components.md §46/§47. */
.update-row__message {
flex: 1;
min-width: 0;
max-width: 68ch;
font-size: var(--text-sm);
line-height: 1.4;
font-weight: 400;
color: var(--text-primary);
}
.update-row__message b {
font-weight: 600;
}
/* ---- Read state ----
Dimming is done with TOKENS, not a blanket row opacity. The reference mock
used `opacity: .62` on the whole row, which composites the message text to
roughly 3.1:1 in light and 3.4:1 in dark - under design.md §4.1's 4.5:1
floor for body text. Shifting the message to `--text-secondary` at full
opacity reads as the same recede while staying measurably legible; only
the dot and the avatar, which carry no text, actually fade.
⚠️ THE `:not(.update-row--static)` GUARDS ARE LOAD-BEARING. These selectors
key off the ABSENCE of `.is-unread`, which was safe while every feed had a
read state - a row was either unread or read. A static row is neither: it
carries no read state at all and so never gets `.is-unread`, and without
these guards all ten rows of the candidate feed would render permanently in
the "already read" treatment - greyed message, 65%-opacity tile - as though
the whole screen were stale. Guarded, static rows sit at --text-primary and
full opacity, and the employer feed's behaviour is untouched. */
.update-row:not(.is-unread):not(.update-row--static) .update-row__message {
color: var(--text-secondary);
}
.update-row.is-unread .update-row__message {
font-weight: 500;
}
.update-row:not(.is-unread):not(.update-row--static) .update-row__avatar,
.update-row:not(.is-unread):not(.update-row--static) .update-row__badge {
opacity: 0.65;
}
/* ---- Accent-tinted tile ----
design.md §9's framed-icon treatment (--accent-tint fill + --accent-ink
glyph), the same pairing the empty state's 56px tile uses. Opt-in via
`rowConfig.avatarClass`, currently only from the candidate Notifications
feed: with the unread dot gone, this tile is the sole colour left in the
row, and it is what makes the feed scannable by event class (viewed vs.
shortlisted) without reading every sentence.
Both tokens flip for dark mode on their own (--accent-tint -> primary-800,
--accent-ink -> accent-300), so no dark-mode rule is needed here. Colour is
never the only signal - the glyph inside carries the distinction, and the
message states it in words (design.md §4.6). */
.update-row__avatar--accent {
background: var(--accent-tint);
/* .avatar's base rule paints a --border-default hairline, which reads as a
grey seam around a tinted disc. --accent-tint-border is the token pairing
designated for exactly this (accent-200 light / primary-700 dark), so the
ring recedes into the fill instead of outlining it. */
border-color: var(--accent-tint-border);
color: var(--accent-ink);
}
/* ---- Timestamp ----
`margin-left: auto` is load-bearing: the message is capped at 68ch, so once
the row is wider than that the message stops growing and the time would
otherwise sit right beside it, stranded mid-row. This pins it to the row's
right inset instead (components.md §46). */
.update-row__time {
flex-shrink: 0;
margin-left: auto;
padding-left: var(--space-4);
font-size: var(--text-xs);
color: var(--text-secondary);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* ---- Focus (design.md §4.2) ---- */
.update-row__mark:focus-visible,
.update-row__main:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
@media (max-width: 599px) {
/* Only the INTERNAL spacing tightens. The row's own padding and gap stay at
--space-4 deliberately: .update-row__mark::before's overhang is sized to
exactly fill them, so shrinking either would push its hit area over
.update-row__main and silently kill part of the 44px target (§4.4). */
.update-row__main {
gap: var(--space-2);
}
.update-row__time {
padding-left: var(--space-2);
}
}
/* ==========================================================================
§80 ADVANCED SEARCH OVERLAY (employer Candidate Search)
design.md §14. Markup: dashboard/employer/index.html.
Controller: assets/js/lib/advanced-search-drawer.js.
==========================================================================
Holds the Gender / Availability / Type / Age filters that are too many to sit
inline on the filter row. Opened by .search-filter-bar__filters-btn.
Shares .candidate-drawer's fixed right-hand geometry, --z-drawer, .drawer-backdrop
and @keyframes drawer-in/out on the VISIBLE state (see that block's note on why
the animation is not a transition out of an off-screen default). Two right-hand
overlays on the same screen that behaved differently would read as a bug.
⚠️ LAYOUT IS A THREE-SIBLING FLEX COLUMN, NOT STICKY-IN-A-SCROLL-CONTAINER.
This is the .template-drawer pattern (see its own layout note), adopted here
after the sticky version shipped with a real defect:
`position: sticky; bottom: 0` only pins while the CONTAINER OVERFLOWS. The
group list is dynamic - narrow the search and two of the four groups hide
themselves - so on a short filter set the drawer stopped overflowing and the
footer dropped to its natural flow position with dead space beneath it. It
LOOKED pinned only because the default result set happened to be long.
The flex column makes it structural instead: __body takes `flex: 1` (= 1 1 0%)
and absorbs every leftover pixel, so __actions is at the true bottom edge with
one group or ten, and __header at the true top.
It also DELETES the whole no-show-through apparatus the sticky version needed -
the opaque backgrounds, the negative full-bleed margins cancelling the drawer's
side padding, and the `top: calc(-1 * var(--space-6))` offset that existed
because a sticky offset resolves against the scroll container's padding edge.
Header and footer are now SIBLINGS of the scroll region, so content physically
cannot pass under them. Do not reintroduce any of it. */
.advanced-search-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 420px;
max-width: 100vw;
background: var(--bg-base);
border-left: 1px solid var(--border-default);
box-shadow: var(--shadow-xl);
z-index: var(--z-drawer);
display: flex;
flex-direction: column;
/* No padding here on purpose: the drawer is now a layout box, not a scroll
box. Each of the three regions owns its own padding, which is what lets the
header and footer draw their full-bleed borders edge to edge. */
}
.advanced-search-drawer[hidden] {
display: none;
}
.advanced-search-drawer:not([hidden]):not(.is-closing) {
animation: drawer-in var(--duration-slow) var(--ease-out);
}
.advanced-search-drawer.is-closing {
animation: drawer-out var(--duration-slow) var(--ease-in) forwards;
}
@media (max-width: 599px) {
.advanced-search-drawer {
width: 100%;
}
}
/* ---- Header: title left, close right - a fixed-height flex sibling ------ */
.advanced-search-drawer__header {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-5) var(--space-5) var(--space-4);
border-bottom: 1px solid var(--border-default);
}
.advanced-search-drawer__title {
margin: 0;
font-size: var(--text-lg);
font-weight: 700;
color: var(--text-primary);
}
/* In-header, NOT position:fixed. The Candidate Drawer's equivalent cluster
(.candidate-drawer__top-controls) has to be fixed because it sits outside two
swappable view panels and serves both; this overlay has a single body, so the
close button can live in the flex header beside the title and can never drift
out of alignment with it.
Its 20px glyph comes from the shared overlay-close rule near the top of this
file - see the warning there about what happens when a close is left out. */
.advanced-search-drawer__close {
flex-shrink: 0;
/* Optically aligns the 44px hit box's glyph with the content edge, matching
.template-drawer__close. */
margin-right: calc(var(--space-2) * -1);
}
/* ---- Scrolling body - THE ONLY scroll container in this overlay --------- */
.advanced-search-drawer__body {
/* `flex: 1` is 1 1 0%: the body absorbs all leftover height, which is what
holds __actions against the true bottom edge no matter how few groups are
rendered. Needs no `min-height: 0` - a flex-basis of 0 plus overflow-y
already establishes the scroll context (auto min-size only bites when the
basis is `auto`/content). */
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-5);
}
/* A ``, NOT a
/.
⚠️ The fieldset was correct until each group gained a `Clear` beside its
title: a 's content model does not admit a flow-content wrapper, and
legend layout is too quirky to reliably flex a heading and a button onto one
row. `role="group"` + `aria-labelledby` maps to the identical accessibility
semantics the fieldset provided, so nothing was lost by the swap. */
.advanced-search__group {
min-width: 0;
}
.advanced-search__group[hidden] {
display: none;
}
/* The title row: heading left, per-group Clear right. Owns the gap below itself
so .advanced-search__group-title does not need a margin of its own. */
.advanced-search__group-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-bottom: var(--space-2);
}
.advanced-search__group-title {
margin: 0;
font-size: var(--text-sm);
font-weight: 700;
color: var(--text-primary);
}
/* Per-group Clear (design.md §14.4). QUIET on purpose: up to four of these are
on screen at once, so the destructive --color-error treatment is reserved for
the bar-level "Clear all Filters" that wipes every filter. This one clears a
single group's DRAFT and is undoable by dismissing the overlay, which is a far
smaller act than the red control implies.
Deliberately excluded from the shared overlay-close svg rule near the top of
this file - it is a labelled action, not a close, and its 12px glyph is sized
to sit beside a --text-sm heading rather than to be a 20px hit target. */
.advanced-search__group-clear {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
border: none;
border-radius: var(--radius-xs);
background: transparent;
color: var(--text-secondary);
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 600;
cursor: pointer;
transition: color var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out);
}
.advanced-search__group-clear:hover {
color: var(--text-primary);
background: var(--bg-elevated);
}
.advanced-search__group-clear svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}
/* ⚠️ Required: `display: inline-flex` above beats the UA's `[hidden]{display:none}`,
so without this the button would stay visible when the controller hides it.
Same trap `.search-filter-bar__clear[hidden]` already has to work around. */
.advanced-search__group-clear[hidden] {
display: none;
}
/* The rows themselves reuse .multi-select__option verbatim (see the controller)
so every checkbox row in the filter system looks identical. This wrapper only
stacks them - deliberately WITHOUT .multi-select__options' max-height/scroll,
since these lists are short and the drawer body is already the scroll region.
Nesting a second scroller here would create the classic scroll-trap. */
.advanced-search__options {
display: flex;
flex-direction: column;
}
/* ---- Footer: Clear All / Apply - a flex sibling, NOT position:sticky -----
⚠️ This used to be `position: sticky; bottom: 0` inside the scrolling drawer,
which pinned only while the drawer OVERFLOWED. The group list is dynamic, so a
narrow search that rendered two of the four groups left the content short, the
drawer no longer overflowed, and the footer dropped to its natural flow
position with dead space under it. As a plain flex sibling of the scroll
region it is at the true bottom edge unconditionally.
Padding is symmetric (space-4) top and bottom. The old rule ended in space-6
purely to supply the bottom padding the scroll container deliberately lacked;
with the flex column that extra depth is just a gap under the buttons. */
.advanced-search-drawer__actions {
flex-shrink: 0;
display: flex;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-top: 1px solid var(--border-default);
}
/* Equal-width buttons: neither action is secondary enough to shrink, and a
full-width pair reads as the drawer's committed decision point. */
.advanced-search-drawer__actions .btn {
flex: 1;
justify-content: center;
}
/* A disabled Age slider (every matched candidate is the same age - see the
controller's setDisabled call) still shows its value, just inert. */
.range-slider-field--disabled {
opacity: 0.6;
}
.range-slider-field--disabled .range-slider__input,
.range-slider-field--disabled .range-slider__number {
cursor: not-allowed;
}
/* =========================================================================
* Rich Text Editor (design.md §8 "Rich text editor")
* -------------------------------------------------------------------------
* The only implementation of that §8 row. Controller:
* assets/js/lib/rich-text-editor.js; catalog entry components.md §89.
*
* Composed from documented primitives rather than inventing a look: the shell
* borrows the `.field__control` edge (1.5px --border-default, --radius-xs) so a
* rich text field sits in a form beside plain inputs without reading as a
* foreign widget, and the toolbar buttons reuse the --accent-tint/--accent-ink
* active pattern that tags and selected states use elsewhere (§9).
* ========================================================================= */
.rte {
border: 1.5px solid var(--border-default);
border-radius: var(--radius-xs);
background: var(--bg-base);
}
/* Focus is shown on the SHELL, not on the contenteditable, because the toolbar
and the text area are one control to the reader even though only one of them
can hold the caret. :focus-within is what makes that true visually, and it
matches `.field__control:focus-visible`'s own --focus-ring border. */
.rte:focus-within {
border-color: var(--focus-ring);
}
/*
* STICKY, and the shell above deliberately has NO `overflow: hidden` so it can
* be: the editor is the tallest thing in the composer, and the modal body is
* the single scroll container (see .modal--wide). Capping the editor's own
* height instead would give the composer two nested scrollbars, which is worse
* than either problem it solves. Sticky keeps Bold within reach at paragraph
* twelve. Corner radii are declared explicitly here because dropping
* `overflow: hidden` means the shell no longer clips its children.
*/
.rte__toolbar {
position: sticky;
top: 0;
z-index: 1;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-1);
padding: var(--space-2);
background: var(--bg-surface);
border-bottom: 1px solid var(--border-default);
border-top-left-radius: var(--radius-xs);
border-top-right-radius: var(--radius-xs);
}
.rte__divider {
width: 1px;
align-self: stretch;
margin: 0 var(--space-1);
background: var(--border-default);
}
/* 32px square, matching .btn-sm's box so the toolbar lines up with any small
button placed near it. Deliberately NOT .btn-icon (a 44px circle) - a dense
formatting toolbar at 44px would be wider than the field it edits. */
.rte__tool {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 1.5px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-secondary);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.rte__tool svg {
width: 18px;
height: 18px;
}
.rte__tool:hover {
background: var(--hover-surface);
color: var(--text-primary);
}
/*
* Active carries TWO meanings now that no selection is required (§89): "the
* selected text has this mark" and "what you type next will have this mark".
* That second reading is why the state has to be this legible - it is the only
* signal that Bold is armed before a single character exists to show it.
* aria-pressed is set in step, so the state is never colour-only (§4.6).
*
* ⚠️ NO `:disabled` RULE, deliberately. Toolbar buttons are never disabled -
* the earlier "select some text first" gating was removed (§89), and a dimmed
* half-toolbar was the single thing that made this editor look broken on open.
*/
.rte__tool.is-active {
background: var(--accent-tint);
border-color: var(--accent-tint-border);
color: var(--accent-ink);
}
/* --radius-md, per the design.md §8 Select row. Sized to the 32px tool box so
the bar keeps one horizontal rhythm; --text-xs because it sits inside a
control strip, not in the form's own label hierarchy. */
.rte__size-select {
height: 32px;
padding: 0 var(--space-2);
border: 1.5px solid var(--border-default);
border-radius: var(--radius-md);
background: var(--bg-base);
color: var(--text-primary);
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 500;
cursor: pointer;
}
.rte__size-select:focus-visible {
border-color: var(--focus-ring);
}
/*
* ⚠️ --text-sm is the RESTING size, and it is a data decision, not a visual
* preference: rich-text-editor.js defaults its size select to "Small" and only
* emits a `.rte-text--*` span when the employer picks a size explicitly. So
* unwrapped text MUST render at the same size .rte-text--sm does, here and in
* .email-preview__body, or the editor shows one size and sends another.
* Changing DEFAULT_SIZE in that module means changing both rules.
*/
.rte__content {
min-height: 200px;
padding: var(--space-3) var(--space-4);
color: var(--text-primary);
font-family: var(--font-body);
font-size: var(--text-sm);
line-height: 1.6;
}
/* A contenteditable cannot use :placeholder-shown, and an "empty" one often
still holds a browser-inserted into them) and the only ones its sanitizer
* keeps on a . They are therefore part of the STORED DATA FORMAT, not
* merely presentation: renaming one silently reflows every message already
* saved. Any surface that renders a stored body - the preview below, a future
* Sent list, the backend's own email template - must ship these rules. Mapped
* to the design.md §2 type scale rather than raw px so they follow the tokens.
* ------------------------------------------------------------------------- */
.rte-text--sm {
font-size: var(--text-sm);
}
.rte-text--md {
font-size: var(--text-base);
}
.rte-text--lg {
font-size: var(--text-lg);
}
.rte-text--xl {
font-size: var(--text-h5);
}
/* =========================================================================
* Recipient Chips (design.md §9 "Recipient chip")
* -------------------------------------------------------------------------
* Controller: assets/js/lib/recipient-chips.js; catalog entry components.md
* §92. First use: the Send Email composer's Recipient field (§90).
*
* ⚠️ NOT `.chip` (§36), and not a variant of it. That class is a --text-xs pill
* sized for a one-word tag; this token is 32px tall and carries an avatar plus
* two strings, so inheriting it would mean overriding its font-size, padding,
* height and gap - every declaration it has. It reuses the PATTERN on purpose
* though - pill radius, inline-flex, the same nested remove button - so the two
* read as siblings.
* ========================================================================= */
.recipient-chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
}
.recipient-chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
max-width: 100%;
min-height: 32px;
padding: var(--space-1) var(--space-2);
border: 1px solid var(--border-default);
border-radius: var(--radius-pill);
background: var(--bg-surface);
font-size: var(--text-sm);
color: var(--text-primary);
}
/* Sizing lives here, not in avatar-illustration.js - that module emits no
dimensions by design and every mount supplies its own (see .candidate-card__
avatar). Both branches need these: the because these are genuinely term/definition pairs: a label column and
a value column, collapsing to stacked rows when narrow. The label column is
FIXED at 64px rather than `auto` so "To" and "Subject" share one left edge -
an auto column sizes to the longer word and indents the shorter one, which
reads as accidental in a two-row header. */
.email-preview__meta {
display: grid;
grid-template-columns: 64px 1fr;
gap: var(--space-2) var(--space-3);
margin: 0;
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--border-default);
}
.email-preview__meta dt {
color: var(--text-secondary);
font-size: var(--text-sm);
font-weight: 600;
}
.email-preview__meta dd {
margin: 0;
color: var(--text-primary);
font-size: var(--text-sm);
overflow-wrap: anywhere; /* a long address must not widen the modal */
}
@media (max-width: 479px) {
.email-preview__meta {
grid-template-columns: 1fr;
gap: var(--space-1);
}
.email-preview__meta dd {
margin-bottom: var(--space-2);
}
}
/*
* ⚠️ The body sets its OWN sizes and is deliberately exempt from the in-app
* `p -> --text-sm` cap at the top of this file. It happens to resolve to the
* same 14px today because Small is the editor's default size (see
* .rte__content) - but it must be stated here rather than inherited, because
* the employer can size any run UP and the cap would drag those s back down.
*/
.email-preview__body {
color: var(--text-primary);
font-size: var(--text-sm);
line-height: 1.6;
overflow-wrap: anywhere;
}
.email-preview__body p {
font-size: inherit;
line-height: inherit;
}
/* Opts back in to list markers - see the .rte__content note above. */
.email-preview__body ul,
.email-preview__body ol {
margin: 0 0 var(--space-3);
padding-left: var(--space-5);
}
.email-preview__body ul {
list-style: disc;
}
.email-preview__body ol {
list-style: decimal;
}
.email-preview__body a {
color: var(--accent-text);
text-decoration: underline;
}
/* -------------------------------------------------------------------------
* The standing platform footer + reply button, and its twin on the success
* confirmation.
* -------------------------------------------------------------------------
* Both use the house INSET PANEL recipe - `--space-4` padding, 1px
* --border-default, --radius-md, --bg-surface - the same one the Candidate
* Detail Drawer's facts panel (.candidate-profile__facts) and the Template
* Builder's question blocks use. Centred, because unlike the message above it
* this block is not correspondence: it is Vanceli speaking, and centring is
* what separates a system notice from the employer's own words.
*
* The two are declared together so they cannot drift. The employer checks the
* reply-to address in the preview and then sees it again after sending; if the
* two boxes looked different, the second would read as a new fact rather than
* a confirmation of the one they already approved.
* ------------------------------------------------------------------------- */
/* Attachment list inside the composer preview and the Email Details overlay
* (components.md §90 "Attachments"). The ROWS themselves are
* .assessment-attachments__file-* above - deliberately reused, not re-declared,
* since it is the same object rendered in the same treatment. Only the heading
* and the block's own spacing are new here. */
.email-preview__attachments {
margin-bottom: var(--space-5);
}
.email-preview__attachments-title {
margin: 0 0 var(--space-2);
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--text-secondary);
}
.email-preview__reply,
.email-sent__reply {
padding: var(--space-4);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
background: var(--bg-surface);
text-align: center;
}
.email-preview__reply-note {
margin: 0 0 var(--space-3);
color: var(--text-secondary);
font-size: var(--text-sm);
}
/* -------------------------------------------------------------------------
* Post-send confirmation. Its body reuses .confirm-panel / .confirm-panel__icon
* (components.md §12) inside a modal; only these two blocks are new.
* ------------------------------------------------------------------------- */
.email-sent__lead {
margin: 0 0 var(--space-4);
color: var(--text-primary);
}
.email-sent__reply {
margin: 0;
color: var(--text-secondary);
font-size: var(--text-sm);
overflow-wrap: anywhere;
}
.email-sent__reply strong {
display: inline-block;
margin-top: var(--space-1);
color: var(--text-primary);
}
/* ==========================================================================
EMAIL DETAILS OVERLAY - components.md §96
design.md §10 (right-side overlay with pinned header + footer), §11.1.
Markup: dashboard/employer/sent-emails/index.html.
Controller: assets/js/lib/email-details-drawer.js.
==========================================================================
Shares .candidate-drawer's fixed right-hand geometry, --z-drawer, the
.drawer-backdrop, and @keyframes drawer-in/out declared on the VISIBLE state
(see the long note on .candidate-drawer above for why the animation is
written that way rather than as a transition off an off-screen default).
⚠️ THREE-SIBLING FLEX COLUMN, NOT STICKY-IN-A-SCROLL-CONTAINER - the same
structure .advanced-search-drawer uses, adopted for the same reason that
block records: `position: sticky; bottom: 0` pins a footer only while the
container OVERFLOWS. This overlay's content is a single email body, which is
routinely SHORTER than the drawer, so a sticky delivery bar would drop to
mid-panel with dead space beneath it on the common case rather than the rare
one.
The flex column also satisfies "nothing scrolls through the pinned items"
STRUCTURALLY: __header and __footer are siblings of the scroll region, not
overlays on top of it, so content physically cannot pass behind them. That
deletes the entire no-show-through apparatus .candidate-drawer__header needs
- the opaque background, the negative full-bleed margins cancelling the
container's side padding, and the `top: calc(-1 * var(--space-6))` offset
that exists because a sticky offset resolves against the scroll container's
PADDING edge. Do not reintroduce any of it here.
This block lives in components.css rather than in pages/sent-emails.css,
despite having exactly one consumer, because it must sit beside the shared
@keyframes it animates with and its selectors are listed in the shared
prefers-reduced-motion group above. Splitting it would put an animation and
its reduced-motion suppression in two different stylesheets.
========================================================================== */
.email-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
/* Wider than .candidate-drawer's 480px: this holds prose at a readable
measure, not a column of short facts. */
width: 520px;
max-width: 100vw;
background: var(--bg-base);
border-left: 1px solid var(--border-default);
box-shadow: var(--shadow-xl);
z-index: var(--z-drawer);
display: flex;
flex-direction: column;
/* No padding on the container on purpose - it is a layout box, not a scroll
box. Each of the three regions owns its own padding, which is what lets the
header and footer draw hairlines that span the full width. */
}
/* Required, not belt-and-braces: the rule above sets an AUTHOR `display: flex`,
which beats the user-agent [hidden]{display:none} regardless of order, so
without this the overlay would never hide. Same trap .email-preview[hidden]
and .candidate-drawer[hidden] document. */
.email-drawer[hidden] {
display: none;
}
.email-drawer:not([hidden]):not(.is-closing) {
animation: drawer-in var(--duration-slow) var(--ease-out);
}
.email-drawer.is-closing {
animation: drawer-out var(--duration-slow) var(--ease-in) forwards;
}
@media (max-width: 599px) {
.email-drawer {
width: 100%;
}
}
/* ---- Pinned header: title left, close right ---------------------------- */
/* flex-shrink: 0 is load-bearing - without it a long body would compress the
header instead of scrolling, since flex items shrink before they overflow. */
.email-drawer__header {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-5);
border-bottom: 1px solid var(--border-default);
}
/* text-h5/20px - the design.md §2.2 in-app type ceiling, matching every other
overlay title. */
.email-drawer__title {
margin: 0;
font-size: var(--text-h5);
font-weight: 600;
line-height: 1.3;
color: var(--text-primary);
}
/* IN the header, not `position: fixed` like .candidate-drawer__close. That one
is fixed because it is a sibling of two swappable view panels and has no
sticky parent spanning the scroll box; here there is a single body and a real
header to sit in, so the simpler treatment is also the more robust one - the
× can never drift out of alignment with the title it sits beside. The 20px
glyph comes from the shared overlay-close rule near the top of this file and
the 44x44 hit area from .btn-icon (design.md §3.7/§4.4). The negative margin
pulls the button's own padding back so its GLYPH, not its hit area, lines up
with the header's right padding. */
.email-drawer__close {
flex-shrink: 0;
margin-right: calc(var(--space-2) * -1);
}
/* ---- The only scroll container in this overlay ------------------------- */
.email-drawer__body {
/* `flex: 1` is 1 1 0% - it absorbs every leftover pixel, which is precisely
what holds the footer against the true bottom edge on a one-line email and
lets it scroll on a long one. A `flex-basis: auto` here would reintroduce
the sticky version's problem. */
flex: 1;
overflow-y: auto;
/* A long unbroken address or URL must ellipsize or wrap, never scroll the
panel sideways. */
overflow-x: hidden;
padding: var(--space-5);
}
/* ---- Pinned delivery receipt ------------------------------------------- */
.email-drawer__footer {
flex-shrink: 0;
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-4) var(--space-5);
border-top: 1px solid var(--border-default);
background: var(--bg-base);
color: var(--text-secondary);
font-size: var(--text-sm);
}
/* The delivered double-tick (icons.js "checks"). --color-success is the only
green in the system and it flips to a lighter value in dark mode, so the
glyph stays legible on both surfaces without a second declaration.
⚠️ The word "Delivered" beside it carries the meaning - the colour and the
glyph are reinforcement, never the signal on their own (design.md §4.6). */
.email-drawer__delivered-icon {
display: flex;
flex-shrink: 0;
color: var(--color-success);
}
/* 20px, a touch larger than the 16px this line's type would suggest: the double
tick is two overlapping strokes rather than one, so it needs the extra size to
read as a double tick rather than as a smudge. See the ⚠️ on `checks` in
icons.js - the glyph and this size were tuned together. */
.email-drawer__delivered-icon svg {
width: 20px;
height: 20px;
}
/* The chip list sits above the subject, mirroring the composer, so it needs the
same gap the rest of .email-preview's column uses. .email-preview supplies
that gap already; this only removes the list's own default padding, which
base.css strips app-wide but which a nested mount can reintroduce. */
.email-drawer__recipients {
min-width: 0;
}