with a
Title
+ the rest as
children. Click the head to toggle. Pages can opt in section by
section to drop scroll length. */
.collapsible {
/* Defensive: never let inner content leak past the content column. The
screenshot Peter sent showed section labels appearing to bleed left
under the sidebar — this guarantees they stay inside .content. */
overflow: hidden;
width: 100%;
box-sizing: border-box;
}
.collapsible-head {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
user-select: none;
padding: 0.875rem 0;
border-top: 1px solid var(--hairline);
}
.collapsible-head::after {
content: "›";
font-size: 1rem;
color: var(--text-3);
transition: transform 0.15s ease;
}
.collapsible[data-collapsed="false"] > .collapsible-head::after {
transform: rotate(90deg);
}
.collapsible[data-collapsed="true"] > :not(.collapsible-head) {
display: none !important;
}
/* ─── Refined buttons ────────────────────────────────────────────
Smaller, lighter, more typographic. Matches marketing CTA. */
.btn {
font-size: var(--fs-caption) !important;
font-weight: 500 !important;
letter-spacing: 0.01em !important;
padding: 0.5625rem 1rem !important;
border-radius: 4px !important;
transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.06s !important;
}
.btn-primary {
background: var(--text) !important;
color: var(--bg) !important;
border: 1px solid var(--text) !important;
}
.btn-primary:hover {
background: var(--text) !important;
border-color: var(--text) !important;
transform: translateY(-0.5px);
}
.btn-ghost {
background: transparent !important;
color: var(--text-2) !important;
border: 1px solid var(--hairline-strong) !important;
}
.btn-ghost:hover {
color: var(--text) !important;
border-color: var(--text-3) !important;
background: rgba(255,255,255,0.02) !important;
}
.btn-small { padding: 0.375rem 0.75rem !important; font-size: 0.6875rem !important; }
/* ─── Refined cards ──────────────────────────────────────────── */
.card {
background: var(--bg-2) !important;
border: 1px solid var(--hairline) !important;
border-radius: 8px !important;
transition: border-color 0.12s !important;
}
.card:hover {
border-color: var(--hairline-strong) !important;
}
/* ─── Stat cards — large mono numbers, mono labels ───────────── */
.stat-card, .setup-card {
background: var(--bg-2);
border: 1px solid var(--hairline);
border-radius: 8px;
padding: 1.25rem 1.375rem;
}
.stat-num, .setup-card-val {
font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
font-size: 1.75rem !important;
font-weight: 400 !important;
letter-spacing: -0.02em !important;
color: var(--text) !important;
line-height: 1.1 !important;
margin-top: 0.375rem;
}
.stat-delta, .setup-card-sub {
font-size: 0.6875rem !important;
color: var(--text-3) !important;
margin-top: 0.5rem !important;
line-height: 1.55 !important;
}
/* Big-num treatment (Performance "How am I interviewing?" hero). */
.big-num {
font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
font-size: 4rem !important;
font-weight: 300 !important;
letter-spacing: -0.03em !important;
line-height: 1 !important;
}
.big-num .small {
font-size: 1.375rem;
color: var(--text-3);
margin-left: 0.375rem;
}
/* ─── Sidebar refinement ──────────────────────────────────────── */
.sidebar {
background: var(--bg) !important;
padding: 1.75rem 1rem !important;
}
.brand-name {
font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
font-size: 0.6875rem !important;
letter-spacing: 0.22em !important; /* tightened from 0.32 to give long workspace names more room */
font-weight: 500 !important;
color: var(--text) !important;
/* Allow up to 2 lines, ellipsis if even that overflows. Lets
"Twenty Holdings (Demo)" render as "TWENTY HOLDINGS / (DEMO)"
instead of getting truncated mid-word to "(D". */
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
line-clamp: 2 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
word-break: break-word !important;
line-height: 1.3 !important;
}
.nav-section-label {
margin: 1.125rem 0 0.375rem !important;
padding: 0 0.5rem !important;
}
.nav-item {
font-size: var(--fs-body-sm) !important;
padding: 0.4375rem 0.625rem !important;
border-radius: 5px !important;
color: var(--text-2) !important;
transition: background 0.1s, color 0.1s !important;
gap: 0.625rem !important;
}
.nav-item:hover {
background: rgba(255,255,255,0.03) !important;
color: var(--text) !important;
}
.nav-item.active {
background: rgba(255,255,255,0.05) !important;
color: var(--text) !important;
}
.nav-icon { opacity: 0.7; }
.nav-item.active .nav-icon { opacity: 1; }
/* User chip at bottom */
.user-chip {
padding: 0.625rem 0.375rem !important;
border-top: 1px solid var(--hairline);
}
/* ─── People grid tiles — softer hairline, more breathing room ── */
.person-tile {
border-radius: 10px !important;
padding: 1rem 1.125rem !important;
transition: all 0.12s !important;
}
.person-tile:hover {
border-color: var(--hairline-strong) !important;
background: rgba(255,255,255,0.025) !important;
}
.person-name { font-size: 0.875rem !important; font-weight: 500 !important; }
.person-role { font-size: 0.6875rem !important; color: var(--text-3) !important; margin-top: 0.1875rem !important; }
/* ─── Inputs / textareas / selects ────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="date"], textarea, select {
background: var(--bg) !important;
border: 1px solid var(--hairline-strong) !important;
color: var(--text) !important;
border-radius: 6px !important;
font-family: inherit !important;
transition: border-color 0.12s !important;
}
input:focus, textarea:focus, select:focus {
border-color: var(--text-3) !important;
outline: none !important;
}
/* ─── Collapsible heads — refined hover, mono labels ─────────── */
.collapsible-head {
padding: 1rem 0 !important;
margin-top: 0.25rem;
transition: color 0.12s;
}
/* Normalize the inline margin-top on settings.html collapsibles. The page
has a mix of 32px and 36px inline values; this clamps them all to one
consistent rhythm so the sections feel like a single ladder. */
main.content > .collapsible[style*="margin-top"] {
margin-top: 1.5rem !important;
}
/* ===== Settings page redesign — compress + brighten ============
Peter flagged the settings page as "ugly, complicated, hard to read"
on Jun 15. This block tightens vertical rhythm, brightens muted
greys, and increases label/sub legibility. Scoped to .settings-content
so it doesn't touch other pages that share .collapsible / .setup-row. */
.settings-content {
max-width: 55rem !important;
}
/* Page header sits closer to first section. */
.settings-content .page-header {
margin-bottom: 0.75rem;
}
/* Tighten collapsible spacing dramatically (was 24px, now 8px) so the
page is browseable as a list, not a series of "rooms". */
.settings-content > .collapsible[style*="margin-top"] {
margin-top: 0.25rem !important;
}
.settings-content > .lbl {
margin-top: 0.875rem !important;
}
/* Collapsible heads — bigger, brighter, more clickable-looking. */
.settings-content .collapsible-head {
padding: 0.75rem 0 !important;
border-top-color: rgba(255, 255, 255, 0.10) !important;
}
.settings-content .collapsible-head .lbl {
font-size: var(--fs-caption) !important;
color: var(--text-2) !important; /* was --text-4 — lifted two steps */
letter-spacing: 0.18em !important;
font-weight: 500 !important;
}
.settings-content .collapsible-head:hover .lbl {
color: var(--text) !important;
}
.settings-content .collapsible-head::after {
color: var(--text-3) !important;
font-size: 1.125rem !important;
}
/* Brighten the muted body text + helper subs throughout settings. */
.settings-content .integration-sub,
.settings-content .setup-card-sub,
.settings-content .hint {
color: var(--text-2) !important; /* was --text-3/4 */
}
/* Compress + brighten setup-cards (BILLING + WORKSPACE summary tiles). */
.settings-content .setup-grid {
gap: 0.625rem !important;
margin-top: 0.5rem !important;
}
.settings-content .setup-card {
padding: 0.75rem 0.875rem !important;
background: rgba(255, 255, 255, 0.025) !important;
border-color: rgba(255, 255, 255, 0.10) !important;
}
.settings-content .setup-card .lbl {
font-size: var(--fs-tiny) !important;
color: var(--text-3) !important;
margin-bottom: 0.375rem !important;
}
.settings-content .setup-card-val {
font-size: 1rem !important;
color: var(--text) !important;
font-weight: 500 !important;
}
.settings-content .setup-card-sub {
font-size: 0.71875rem !important;
margin-top: 0.1875rem !important;
}
/* Tighter setup-rows (toggle rows). */
.settings-content .setup-row {
padding: 0.625rem 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
font-size: var(--fs-body-sm) !important;
}
.settings-content .setup-row:last-child {
border-bottom: none !important;
}
.settings-content .setup-row > span:first-child {
color: var(--text) !important;
font-weight: 400;
}
.settings-content .integration-name {
font-size: var(--fs-body-sm) !important;
color: var(--text) !important;
font-weight: 500;
display: block;
}
.settings-content .integration-sub {
font-size: 0.71875rem !important;
line-height: 1.55 !important;
margin-top: 0.125rem;
display: block;
}
/* Brighter integration-help collapsibles (those "How do I connect this?" rows). */
.settings-content .integration-help summary {
color: var(--text-3) !important;
padding: 0.5rem 0 !important;
font-size: var(--fs-caption) !important;
}
.settings-content .integration-help summary:hover {
color: var(--text) !important;
}
.settings-content .integration-help ol {
font-size: var(--fs-caption) !important;
color: var(--text-2) !important;
line-height: 1.65 !important;
}
/* Toggle pills — brighten the "off" state so it doesn't look dead. */
.settings-content .toggle {
background: rgba(255, 255, 255, 0.10) !important;
}
.settings-content .toggle.on {
background: var(--text) !important;
}
/* ===== Employee add-modal drop zone ===== */
.employee-drop-zone {
border: 1px dashed var(--hairline-strong);
border-radius: 7px;
padding: 0.875rem 1rem;
text-align: center;
cursor: pointer;
transition: border-color 0.12s, background 0.12s;
font-size: 0.78125rem;
color: var(--text-2);
user-select: none;
}
.employee-drop-zone:hover,
.employee-drop-zone.drag-over {
border-color: var(--text-3);
background: rgba(255, 255, 255, 0.03);
}
/* "Add to Jedah" tip banner on Candidates + Team pages. Subtle hairline
panel that points users at the Chrome extension without taking real
estate from the main list. */
.add-to-jedah-hint {
display: flex;
align-items: flex-start;
gap: 0.625rem;
padding: 0.6875rem 0.875rem;
margin: 0 0 1.125rem;
background: var(--bg-2);
border: 1px solid var(--hairline);
border-radius: 6px;
font-size: var(--fs-caption);
color: var(--text-2);
line-height: 1.6;
}
.add-to-jedah-hint-icon {
font-size: 0.875rem;
line-height: 1.4;
flex-shrink: 0;
}
.add-to-jedah-hint b {
color: var(--text);
font-weight: 500;
}
.collapsible-head:hover {
color: var(--text);
}
.collapsible-head:hover .lbl {
color: var(--text-2) !important;
}
.collapsible-head .lbl {
transition: color 0.12s;
}
/* ─── Content layout — wider, more whitespace ──────────────────
max-width reads the fluid --content-max / --content-wide tokens so the
reading column widens on a large display instead of leaving one huge
empty gutter. Both are clamped in design-tokens.css. */
.content {
width: 100%;
/* main.content is BOTH of the mock's two elements: the padded shell
(.jw-content, 26px/36px) and the measured column (.jw-page). A max-width
on a border-box element includes that padding, so the cap has to carry
the 2 x 36px gutter to land the text on the mock's measure. */
max-width: calc(var(--content-max) + 72px);
margin-left: auto;
margin-right: auto;
}
.content-wide { max-width: calc(var(--content-wide) + 72px) !important; }
.content-narrow { max-width: 952px !important; } /* 880 + 72 */
.content-compact { max-width: 932px !important; } /* 860 + 72 */
@media (max-width: 720px) {
.content { padding: 1.5rem 1.25rem !important; }
}
/* ============ Reading measure ============
The app column above is deliberately allowed to fill a big display, which
is right for card grids, tables and list rows and wrong for paragraphs: a
1700px line of prose is unreadable no matter how much room there is. Every
block that holds running text is therefore capped at --prose-max (46rem,
fluid), and the leftover width inside its card reads as margin.
Scoped to p./div. deliberately: `span.editorial` is a one-line, ellipsised
summary inside a flex row (dashboard "Recent interviews", job-description
cards), not a paragraph, and capping it would truncate it early. */
p.editorial,
div.editorial,
.jwd-read,
.pattern-read-prose,
.pattern-read-body,
.devils-advocate-body,
.person-dimension-narrative,
.da-prose,
.deep-analysis,
.deep-analysis-section > p,
.jw-prose {
max-width: var(--prose-max);
}
/* ============ THE EXPORT'S PER-SCREEN MEASURE ============
redesign-v5 does not draw every screen at one width. .jw-page defaults to
--content-max (1100px), .jw-page-wide to --content-wide (1280px), and the
list-first screens are drawn narrower still -- inline on .jw-page in the
mocks:
01 Dashboard / 02 Candidates / 05 Interviews 880px
10 Scheduling / 12 + 13 Settings 860px
03 + 04 Candidate / 11 Job Descriptions 1100px (--content-max)
07 Compare / 08 Org Insights / 09 Performance 1280px (--content-wide)
5492dd8 deleted the inline 880/860 caps and replaced them with one
ever-growing token for every page, because an inline declaration cannot be
beaten by the data-layout variants. That is most of the "warped" read: a
dashboard composed for an 880px column, stretched to 1500px, is a
different page -- the KPI strip thins out, the two-up cards drift apart
and the list rows turn into rules with a word at each end.
The measures are back, as classes rather than inline styles, so the layout
axis further down this file can still override them.
The @media(min-width:1800px) two-column dashboard that used to live here
went with them: it existed only to soak up a column that had grown too
wide, and inside an 880px measure it would put two sections side by side
in 440px each. */
.content-narrow { max-width: 952px; } /* 880 + the 2 x 36px shell gutter */
.content-compact { max-width: 932px; } /* 860 + the 2 x 36px shell gutter */
/* ─── Hint footers — softer, mono ──────────────────────────── */
.hint {
font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
font-size: 0.625rem !important;
letter-spacing: 0.12em !important;
color: var(--text-4) !important;
text-transform: uppercase;
margin-top: 2.5rem !important;
padding-top: 1.25rem;
border-top: 1px solid var(--hairline);
}
/* ─── Profile hero names — match the page-title hero treatment ── */
.cand-name, .emp-name {
font-size: 2.25rem !important;
font-weight: 400 !important;
letter-spacing: -0.03em !important;
line-height: 1.1 !important;
color: var(--text);
}
.cand-sub, .profile-hero-meta {
font-size: var(--fs-body-sm) !important;
color: var(--text-2) !important;
margin-top: 0.375rem !important;
}
@media (max-width: 720px) {
.cand-name, .emp-name { font-size: 1.75rem !important; }
}
/* Big alignment score in employee profile — mono numeric. */
.profile-score-num {
font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
font-size: var(--fs-display-xl) !important;
font-weight: 300 !important;
letter-spacing: -0.02em !important;
}
.profile-score-lbl {
font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
font-size: 0.625rem !important;
letter-spacing: 0.22em !important;
color: var(--text-4) !important;
text-transform: uppercase;
}
/* Section header (h2) inside pages — slightly bigger than legacy. */
.section-h h2, h2 {
font-size: 1.125rem !important;
font-weight: 500 !important;
letter-spacing: -0.015em !important;
color: var(--text);
}
/* ─── Granular hovers — kill block-wide background fills ──────────
Previous pass had .card:hover, .person-tile:hover, .list-row:hover
setting backgrounds, which lit up the whole container under your
cursor. Override all of those to a subtle border-only change so
only the *specific* clickable child gets highlighted. */
.card:hover,
.person-tile:hover,
.list-row:hover,
.template-card:hover,
.rubric-active:hover,
.interview-row:hover,
.compare-pick-row:hover,
.compose-row:hover {
background: transparent !important;
}
.card:hover,
.person-tile:hover,
.template-card:hover,
.rubric-active:hover {
border-color: var(--hairline-strong) !important;
transform: none !important;
}
/* Names and titles inside blocks brighten on direct hover. */
.person-tile .person-name,
.list-row .pri,
.list-row .name,
.compose-row .compose-name,
.template-name,
.rubric-active-name {
transition: color 0.12s !important;
}
.person-tile .person-name:hover,
.list-row .pri:hover,
.list-row .name:hover,
.compose-row .compose-name:hover,
.template-name:hover,
.rubric-active-name:hover {
color: var(--text) !important;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: var(--text-3) !important;
}
/* Ghost buttons inside cards — only the button itself flickers, not the card. */
.card .btn,
.person-tile .btn,
.list-row .btn {
transition: border-color 0.12s, color 0.12s, background 0.12s !important;
}
/* Arrows (→) inside list rows brighten on hover. */
.list-row .arrow,
.interview-row .arrow {
color: var(--text-4);
transition: color 0.12s, transform 0.12s;
}
.list-row:hover .arrow,
.interview-row:hover .arrow {
/* Only the arrow shifts — block stays still. */
color: var(--text) !important;
transform: translateX(2px);
}
/* Nav items keep their subtle background hover — they're not blocks
containing other interactive children, so block hover is fine here. */
/* ═══════════════════════════════════════════════════════════════
MOBILE PASS — narrow-viewport layout
Sidebar collapses behind a hamburger; content takes full width;
tiles stack; padding tightens. Activates under 1024px.
═══════════════════════════════════════════════════════════════ */
/* Hamburger button — only appears on mobile. JS in sidebar-tier.js
appends one to the page header on narrow viewports. */
.jedah-hamburger {
display: none;
position: fixed;
top: 0.875rem;
left: 0.875rem;
z-index: 9999;
width: 2.5rem;
height: 2.5rem;
background: var(--bg-2);
border: 1px solid var(--hairline-strong);
border-radius: 8px;
cursor: pointer;
padding: 0;
align-items: center;
justify-content: center;
}
.jedah-hamburger span {
display: block;
width: 1.125rem;
height: 0.09375rem;
background: var(--text);
position: relative;
}
.jedah-hamburger span::before,
.jedah-hamburger span::after {
content: "";
position: absolute;
left: 0;
width: 1.125rem;
height: 0.09375rem;
background: var(--text);
}
.jedah-hamburger span::before { top: -0.375rem; }
.jedah-hamburger span::after { top: 0.375rem; }
/* Backdrop that dims the page when the sidebar drawer is open. */
.jedah-sidebar-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 9997;
}
/* Sidebar drawer activates at tablet/laptop breakpoint. */
@media (max-width: 1024px) {
/* Hamburger visible. */
.jedah-hamburger { display: flex; }
/* Shell becomes a single column; sidebar slides in over content. */
.shell {
grid-template-columns: 1fr !important;
}
/* Sidebar becomes a fixed off-canvas drawer. */
.sidebar {
position: fixed !important;
top: 0;
left: 0;
bottom: 0;
width: 80vw;
max-width: 17.5rem;
transform: translateX(-100%);
transition: transform 0.18s ease;
z-index: 9998;
border-right: 1px solid var(--hairline-strong) !important;
overflow-y: auto;
}
body.sidebar-open .sidebar { transform: translateX(0); }
body.sidebar-open .jedah-sidebar-backdrop { display: block; }
/* Push the content out from under the (hidden) sidebar. */
.content,
.content-wide {
padding: 4rem 1.125rem 2rem !important;
max-width: 100% !important;
}
}
/* Phone-specific layout adjustments (narrower than tablet). */
@media (max-width: 720px) {
/* Page header — stack title, button, and meta. */
.page-header {
flex-direction: column;
align-items: flex-start !important;
gap: 0.75rem;
margin-bottom: 1.75rem !important;
padding-bottom: 1.125rem !important;
}
.page-title { font-size: 1.75rem !important; }
.page-sub { font-size: var(--fs-caption) !important; }
.cand-name, .emp-name { font-size: var(--fs-display) !important; }
/* Tiles + grids stack. */
.people-grid-simple,
.stats-row,
.setup-grid,
.perf-grid-2,
.dim-grid,
.compose-list {
grid-template-columns: 1fr !important;
gap: 0.625rem !important;
}
.stat-card, .setup-card { padding: 0.875rem 1rem; }
/* Person tiles — slightly tighter on phone. */
.person-tile { padding: 0.75rem 0.875rem !important; }
/* Cards trim horizontal padding. */
.card { padding: 0.875rem !important; }
/* Tables overflow horizontally instead of breaking the layout. */
.perf-table,
table {
display: block;
overflow-x: auto;
white-space: nowrap;
max-width: 100%;
}
/* Modals: full-screen on mobile so users can actually use the form. */
.modal {
max-width: 100% !important;
margin: 0 !important;
min-height: 100vh;
border-radius: 0 !important;
}
/* Page tabs scroll horizontally if they overflow. */
.page-tabs,
.perf-tabs {
overflow-x: auto;
white-space: nowrap;
flex-wrap: nowrap !important;
}
/* Filter chips wrap to a second line gracefully. */
.filter-row { flex-wrap: wrap; gap: 0.375rem !important; }
/* Buttons shrink a touch. */
.btn { padding: 0.5rem 0.875rem !important; font-size: var(--fs-caption) !important; }
/* Hide the chevron in collapsible heads' :after if it overflows. */
.collapsible-head { padding: 0.875rem 0.25rem !important; }
}
/* Even smaller screens — 380px iPhone SE etc — extra tightening. */
@media (max-width: 400px) {
.content, .content-wide { padding: 3.75rem 0.875rem 1.5rem !important; }
.page-title { font-size: var(--fs-display) !important; }
.stat-num, .setup-card-val { font-size: 1.375rem !important; }
.big-num { font-size: 2.75rem !important; }
}
/* ===== Devil's Advocate panel ===========================================
Counterweight UI on candidate.html. Visually distinct from the deep-analysis
block (which is "the case for") — slightly warmer tone, smarter typography,
so audience reads it as a different *kind* of analysis, not a duplicate.
*/
.devils-advocate-section { margin-bottom: 1.75rem; }
.da-cta {
background: rgba(40, 28, 28, 0.35);
border: 1px solid rgba(200, 130, 130, 0.22);
border-radius: 10px;
padding: 1.125rem 1.25rem;
display: flex;
gap: 1rem;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.da-cta-text { font-size: var(--fs-body-sm); color: var(--text-2); line-height: 1.6; max-width: 35rem; }
.da-cta-text em { color: var(--text); font-style: italic; font-weight: 500; }
.da-cta button { white-space: nowrap; }
.da-empty {
font-size: var(--fs-caption); color: var(--text-3); padding: 1.125rem 1.25rem;
background: var(--bg-2); border-radius: 8px; line-height: 1.55;
}
.da-loading {
font-size: var(--fs-body-sm); color: var(--text-2); padding: 1.375rem 1.25rem;
background: var(--bg-2); border-radius: 8px;
}
.da-analysis {
background: var(--bg-2); /* was a hardcoded dark literal: unreadable on the light palettes */
border: 1px solid rgba(200, 130, 130, 0.18);
border-radius: 12px;
padding: 1.5rem 1.625rem 1.125rem;
}
.da-headline {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 1rem; margin-bottom: 1.375rem; padding-bottom: 1.125rem;
border-bottom: 1px solid var(--hairline);
}
.da-headline-text {
font-size: 1.125rem; font-weight: 500; line-height: 1.4; color: var(--text);
letter-spacing: -0.2px; flex: 1;
}
.da-verdict {
font-family: "IBM Plex Mono", monospace; font-size: 0.6875rem;
letter-spacing: 0.14em; font-weight: 500; padding: 0.375rem 0.625rem;
border-radius: 4px; white-space: nowrap; flex-shrink: 0;
}
.da-verdict-weakno { background: rgba(198, 107, 92, 0.16); color: var(--c-danger-text); }
.da-verdict-leanno { background: rgba(220, 170, 130, 0.16); color: var(--score-warn); }
.da-verdict-qualyes { background: rgba(120, 200, 145, 0.14); color: var(--sage-bright); }
.da-verdict-even { background: rgba(180, 180, 180, 0.12); color: var(--text-2); }
.da-block { margin-top: 1.375rem; }
.da-block:first-child { margin-top: 0; }
.da-block-lbl {
font-family: "IBM Plex Mono", monospace; font-size: 0.625rem;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--text-3); margin-bottom: 0.625rem; font-weight: 500;
}
.da-item {
background: rgba(40, 28, 28, 0.30);
border-left: 3px solid rgba(200, 130, 130, 0.4);
border-radius: 4px;
padding: 0.75rem 0.875rem;
margin-bottom: 0.5rem;
}
.da-item.da-sev-high { border-left-color: var(--c-danger-text); background: rgba(198, 107, 92, 0.10); }
.da-item.da-sev-med { border-left-color: rgba(220, 170, 130, 0.6); }
.da-item.da-sev-low { border-left-color: rgba(180, 180, 180, 0.4); }
.da-item-head { display: flex; gap: 0.625rem; align-items: center; margin-bottom: 0.375rem; }
.da-sev-pill {
font-family: "IBM Plex Mono", monospace; font-size: 0.5625rem;
letter-spacing: 0.14em; padding: 0.125rem 0.375rem; border-radius: 3px;
background: rgba(255,255,255,0.06); color: var(--text-3); flex-shrink: 0;
}
.da-sev-high .da-sev-pill { background: rgba(198, 107, 92, 0.18); color: var(--c-danger-text); }
.da-sev-med .da-sev-pill { background: rgba(220, 170, 130, 0.16); color: var(--score-warn); }
.da-item-point { font-size: 0.875rem; font-weight: 500; color: var(--text); line-height: 1.4; }
.da-item-ev { font-size: var(--fs-caption); color: var(--text-2); line-height: 1.55; padding-left: 0; }
.da-item-ev b { color: var(--text-3); font-weight: 500; font-family: "IBM Plex Mono", monospace; font-size: 0.625rem; letter-spacing: 0.06em; }
.da-prose { font-size: var(--fs-body-sm); color: var(--text-2); line-height: 1.65; }
.da-list {
list-style: disc; padding-left: 1.375rem; margin: 0;
font-size: var(--fs-body-sm); color: var(--text-2); line-height: 1.6;
}
.da-list li { margin-bottom: 0.375rem; }
.da-list-ol { list-style: decimal; }
.da-counter {
margin-top: 1.375rem; padding: 1rem 1.125rem;
background: rgba(120, 200, 145, 0.06);
border: 1px solid rgba(120, 200, 145, 0.18);
border-radius: 8px;
}
.da-counter .da-block-lbl { color: rgba(120, 200, 145, 0.8); }
.da-foot {
display: flex; justify-content: space-between; align-items: center;
margin-top: 1.125rem; padding-top: 0.875rem; border-top: 1px solid var(--hairline);
font-family: "IBM Plex Mono", monospace; font-size: 0.625rem;
color: var(--text-3); letter-spacing: 0.04em;
}
.da-regen {
background: transparent; border: 1px solid var(--hairline);
color: var(--text-3); font-family: inherit; font-size: 0.625rem;
padding: 0.25rem 0.625rem; border-radius: 3px; cursor: pointer;
transition: all 0.12s;
}
.da-regen:hover { border-color: var(--text-3); color: var(--text); }
/* ===== Person Dimensions — 8-factor framework panel ==================
The deepest, most philosophical read Jedah produces. Visually distinct
from deep-analysis (green) and devil's advocate (warm red) — uses a
neutral high-contrast card style with a subtle accent so it reads as
"the foundational analysis" rather than competing with the others.
*/
.pd-section { margin-bottom: 1.75rem; }
.pd-cta {
background: var(--bg-2); /* was a hardcoded dark literal: unreadable on the light palettes */
border: 1px solid var(--hair-2);
border-radius: 10px;
padding: 1.25rem 1.375rem;
display: flex;
gap: 1.125rem;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.pd-cta-text { font-size: 0.875rem; color: var(--text-2); line-height: 1.65; max-width: 38.75rem; }
.pd-cta-text b { color: var(--text); }
.pd-cta button { white-space: nowrap; }
.pd-loading {
background: var(--bg-2); padding: 1.5rem 1.375rem; border-radius: 8px;
font-size: 0.875rem; color: var(--text-2);
}
.pd-loading-sub { font-size: var(--fs-caption); color: var(--text-3); margin-top: 0.5rem; }
.pd-analysis {
background: var(--bg-2); /* was a hardcoded dark literal: unreadable on the light palettes */
border: 1px solid var(--hair-2);
border-radius: 12px;
padding: 1.625rem 1.75rem 1.25rem;
}
.pd-headline {
font-size: 1.125rem;
font-weight: 500;
line-height: 1.45;
color: var(--text);
letter-spacing: -0.2px;
margin-bottom: 1.125rem;
padding-bottom: 1.125rem;
border-bottom: 1px solid var(--hairline);
}
.pd-compat {
background: rgba(255, 255, 255, 0.04);
border-left: 3px solid var(--accent, #b0b0b0);
padding: 0.875rem 1.125rem;
margin-bottom: 1.375rem;
border-radius: 4px;
font-size: 0.875rem;
line-height: 1.65;
color: var(--text-2);
}
.pd-compat-lbl {
font-family: "IBM Plex Mono", monospace; font-size: 0.625rem;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--text-3); margin-bottom: 0.375rem; font-weight: 500;
}
.pd-top { display: flex; gap: 1.375rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.pd-top-block { flex: 1; min-width: 15rem; }
.pd-top-lbl {
font-family: "IBM Plex Mono", monospace; font-size: 0.625rem;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--text-3); margin-bottom: 0.5rem; font-weight: 500;
}
.pd-chip {
display: inline-block; padding: 0.375rem 0.75rem;
border-radius: 4px; font-size: var(--fs-caption); font-weight: 500;
margin: 0 0.375rem 0.375rem 0;
}
.pd-chip-good { background: rgba(120, 200, 145, 0.14); color: var(--sage-bright); }
.pd-chip-warn { background: rgba(198, 107, 92, 0.14); color: var(--c-danger-text); }
.pd-dims-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.875rem;
margin-bottom: 1.375rem;
}
@media (min-width: 900px) {
.pd-dims-grid { grid-template-columns: 1fr 1fr; }
}
.pd-dim {
background: rgba(0, 0, 0, 0.25);
border: 1px solid var(--hair);
border-radius: 8px;
padding: 1rem 1.125rem;
}
.pd-dim-head {
display: flex; justify-content: space-between; align-items: center;
gap: 0.75rem; margin-bottom: 0.625rem;
}
.pd-dim-name {
font-size: var(--fs-h3); font-weight: 600; color: var(--text);
letter-spacing: -0.1px;
}
.pd-dim-meta { display: flex; gap: 0.5rem; align-items: center; flex-shrink: 0; }
.pd-dim-score {
font-family: "IBM Plex Mono", monospace; font-size: var(--fs-caption);
padding: 0.1875rem 0.5rem; border-radius: 3px; font-weight: 500;
}
.pd-score-exceptional { background: rgba(120, 200, 145, 0.20); color: var(--sage-bright); }
.pd-score-strong { background: rgba(120, 200, 145, 0.12); color: var(--sage-bright); }
.pd-score-solid { background: rgba(180, 180, 180, 0.12); color: var(--text); }
.pd-score-concern { background: rgba(220, 170, 130, 0.16); color: var(--score-warn); }
.pd-score-gap { background: rgba(198, 107, 92, 0.16); color: var(--c-danger-text); }
.pd-score-na { background: rgba(180, 180, 180, 0.06); color: var(--text-3); }
.pd-dim-conf {
font-family: "IBM Plex Mono", monospace; font-size: 0.5625rem;
letter-spacing: 0.14em; padding: 0.1875rem 0.4375rem; border-radius: 3px;
}
.pd-conf-high { background: rgba(255, 255, 255, 0.10); color: var(--text); }
.pd-conf-med { background: rgba(255, 255, 255, 0.06); color: var(--text-2); }
.pd-conf-low { background: rgba(255, 255, 255, 0.04); color: var(--text-3); }
.pd-dim-read {
font-size: 0.875rem; color: var(--text); line-height: 1.6;
margin-bottom: 0.625rem;
}
.pd-dim-ev-lbl {
font-family: "IBM Plex Mono", monospace; font-size: 0.5625rem;
letter-spacing: 0.14em; color: var(--text-3); margin-bottom: 0.25rem;
font-weight: 500;
}
.pd-dim-ev ul {
margin: 0; padding-left: 1.125rem; font-size: var(--fs-body-sm);
color: var(--text-2); line-height: 1.55;
}
.pd-dim-ev li { margin-bottom: 0.25rem; }
.pd-dim-probe {
margin-top: 0.625rem; font-size: var(--fs-caption); color: var(--text-3);
line-height: 1.55; padding-top: 0.5rem;
border-top: 1px dashed var(--hairline);
}
.pd-dim-probe b {
font-family: "IBM Plex Mono", monospace; font-size: 0.5625rem;
letter-spacing: 0.14em; color: var(--text-3); font-weight: 500;
}
/* ─── Shadow read (interviewer-facing) ─────────────────────────────────
A dimension's shadow is the dark side of its strength — independent of the
1-10 score. The chip sits next to the score; the shadow_evidence quote is
behind a drop-down. Latent = muted; present = stronger.
NOTE: .pd-shadow-flag and .pd-shadow-badge are the pre-scoring, risk-word-
only chips. Superseded by .pd-shadow-score below (which carries the number)
and no longer emitted by any renderer. Kept for one release in case a
surface is missed; delete once nothing references them. */
.pd-shadow-flag {
font-family: "IBM Plex Mono", monospace; font-size: 0.5625rem;
letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
padding: 0.1875rem 0.5rem; border-radius: 9999px; border: 1px solid;
}
.pd-shadow-flag.pd-shadow-latent {
color: var(--text-3); border-color: var(--hairline);
background: rgba(255, 255, 255, 0.04);
}
.pd-shadow-flag.pd-shadow-present {
color: var(--score-warn, #E8978A); border-color: rgba(198, 107, 92, 0.4);
background: rgba(198, 107, 92, 0.12);
}
.pd-shadow {
margin-top: 0.625rem; border: 1px solid var(--hairline);
border-radius: 8px; background: rgba(0, 0, 0, 0.18); overflow: hidden;
}
.pd-shadow.pd-shadow-present { border-color: rgba(198, 107, 92, 0.32); }
.pd-shadow > summary {
list-style: none; cursor: pointer; display: flex; align-items: center;
gap: 0.625rem; padding: 0.625rem 0.75rem;
}
.pd-shadow > summary::-webkit-details-marker { display: none; }
.pd-shadow > summary:hover { background: rgba(255, 255, 255, 0.03); }
.pd-shadow .cq-chevron {
font-size: 0.625rem; color: var(--text-3); transition: transform 0.15s ease;
flex-shrink: 0;
}
.pd-shadow[open] .cq-chevron { transform: rotate(90deg); }
.pd-shadow-label {
flex: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: var(--text);
}
.pd-shadow-badge {
flex-shrink: 0; font-family: "IBM Plex Mono", monospace; font-size: 0.5625rem;
letter-spacing: 0.1em; font-weight: 600; padding: 0.125rem 0.4375rem; border-radius: 9999px;
border: 1px solid;
}
.pd-shadow-badge.pd-shadow-latent {
color: var(--text-3); border-color: var(--hairline); background: var(--hair);
}
.pd-shadow-badge.pd-shadow-present {
color: var(--score-warn, #E8978A); border-color: rgba(198, 107, 92, 0.4);
background: rgba(198, 107, 92, 0.12);
}
.pd-shadow-detail {
padding: 0 0.75rem 0.75rem 2.125rem; font-size: 0.8125rem; line-height: 1.6; color: var(--text-2);
}
.pd-shadow-def { color: var(--text-3); margin-bottom: 0.5rem; font-style: italic; }
.pd-shadow-detail .cq-ev-lbl {
font-family: "IBM Plex Mono", monospace; font-size: 0.59375rem;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4);
display: block; margin-bottom: 0.25rem;
}
/* ─── Shadow SCORE (first class, alongside the strength score) ──────────
THE SHADOW SCALE IS INVERTED: 1 is good, 10 is bad. So on these chips
colour always means good-or-bad and never high-or-low — a GREEN shadow chip
carries a LOW number and a RED one carries a HIGH number, the exact reverse
of the strength value sitting beside it on the same row. The state word
(CLEAR / LATENT / PRESENT) is baked into the chip so the direction never
rests on colour alone, and .pd-shadow-legend states it in words once per
card. Do not "fix" the ramp to match the strength colours. */
.pd-shadow-score {
display: inline-flex; align-items: baseline; gap: 0.375rem;
font-family: "IBM Plex Mono", monospace; font-size: 0.5625rem;
letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
padding: 0.1875rem 0.5rem; border-radius: 9999px; border: 1px solid;
white-space: nowrap;
}
.pd-shadow-score .pd-shadow-num {
font-size: 0.6875rem; letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}
.pd-shadow-score .pd-shadow-state { font-weight: 500; opacity: 0.78; }
.pd-shadow-score.is-clear {
color: var(--score-v3-high); border-color: rgba(123, 166, 140, 0.34);
background: rgba(123, 166, 140, 0.10);
}
.pd-shadow-score.is-latent {
color: var(--score-v3-mid); border-color: rgba(232, 149, 68, 0.34);
background: rgba(232, 149, 68, 0.10);
}
.pd-shadow-score.is-present {
color: var(--score-v3-low); border-color: rgba(198, 107, 92, 0.44);
background: rgba(198, 107, 92, 0.14);
}
.pd-shadow-score.is-unknown {
color: var(--text-4); border-color: var(--hairline);
background: rgba(255, 255, 255, 0.03);
}
/* The chip also appears inside the drop-down summary, where .pd-shadow-label
takes flex:1 — keep the chip from being squeezed. */
.pd-shadow > summary .pd-shadow-score { flex-shrink: 0; }
/* Legend + note are sentences, not labels: mono for family, sentence case. */
.pd-shadow-legend {
font-family: "IBM Plex Mono", monospace; font-size: 0.6875rem;
letter-spacing: 0.01em; color: var(--text-4);
line-height: 1.65; margin: 0 0 0.75rem;
}
.pd-shadow-inverted-note {
font-family: "IBM Plex Mono", monospace; font-size: 0.625rem;
letter-spacing: 0.01em; color: var(--text-4);
display: block; margin-bottom: 0.375rem;
}
.pd-next {
background: rgba(255, 255, 255, 0.04);
border-radius: 8px;
padding: 1rem 1.25rem;
margin-bottom: 1.25rem;
}
.pd-next-lbl {
font-family: "IBM Plex Mono", monospace; font-size: 0.625rem;
letter-spacing: 0.18em; color: var(--text-3);
margin-bottom: 0.5rem; font-weight: 500; text-transform: uppercase;
}
.pd-next ol {
margin: 0; padding-left: 1.375rem;
font-size: var(--fs-body-sm); color: var(--text); line-height: 1.65;
}
.pd-next li { margin-bottom: 0.375rem; }
.pd-foot {
display: flex; justify-content: space-between; align-items: center;
margin-top: 1.125rem; padding-top: 0.875rem; border-top: 1px solid var(--hairline);
font-family: "IBM Plex Mono", monospace; font-size: 0.625rem;
color: var(--text-3); letter-spacing: 0.04em;
}
.pd-regen {
background: transparent; border: 1px solid var(--hairline);
color: var(--text-3); font-family: inherit; font-size: 0.625rem;
padding: 0.25rem 0.625rem; border-radius: 3px; cursor: pointer;
transition: all 0.12s;
}
.pd-regen:hover { border-color: var(--text-3); color: var(--text); }
/* ===== Zoom-screen-share legibility floor ========================
Bumps small fonts globally so the app reads cleanly on a shared
screen. Targets the specific contexts where 11–12px text appears
without breaking layouts that depend on tight typography.
Toggle off by removing this block — nothing else depends on it.
*/
/* Empty-state hints + helper-text under section labels */
.lbl + p, p.hint {
font-size: 0.84375rem !important;
line-height: 1.65 !important;
}
/* Section headers (the .lbl monospace category labels) */
.lbl, .compose-title, .responses-title {
font-size: 0.78125rem !important;
}
/* Inputs + textareas + selects across the app */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="tel"], input[type="url"], textarea, select {
font-size: 0.90625rem !important;
}
/* Buttons everywhere */
.btn, button.btn, .btn-ghost, .btn-primary, .btn-small {
font-size: 0.84375rem !important;
}
/* The mono "EVIDENCE / WHAT TO PROBE" sub-labels stay small (they
benefit from being secondary), but the body text under them bumps. */
.pd-dim-read, .deep-summary, .deep-point, .da-item-point,
.compose-question, .compose-context.warn,
.resp-name, .resp-theme,
.checkin-tight .ck-q, .checkin-tight .ck-theme {
font-size: 0.875rem !important;
line-height: 1.6 !important;
}
/* Tight number columns on people-grid / dashboard tiles */
.person-row .role, .person-row .meta,
.emp-card .meta, .candidate-row .meta {
font-size: var(--fs-body-sm) !important;
}
/* ===== Person Dimensions — alignment pills (when company side on file) ===== */
.pd-align {
margin-top: 0.625rem;
padding: 0.625rem 0.875rem;
border-radius: 6px;
font-size: 0.78125rem;
line-height: 1.55;
}
.pd-align-aligned { background: rgba(120, 200, 145, 0.10); border-left: 3px solid rgba(120, 200, 145, 0.7); }
.pd-align-person { background: rgba(220, 170, 130, 0.10); border-left: 3px solid rgba(220, 170, 130, 0.7); }
.pd-align-company { background: rgba(130, 170, 220, 0.10); border-left: 3px solid rgba(130, 170, 220, 0.7); }
.pd-align-unknown { background: rgba(180, 180, 180, 0.06); border-left: 3px solid rgba(180, 180, 180, 0.4); }
.pd-align-head { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.pd-align-pill {
font-family: "IBM Plex Mono", monospace; font-size: 0.625rem;
letter-spacing: 0.14em; font-weight: 500;
padding: 0.1875rem 0.5rem; border-radius: 3px;
background: rgba(255,255,255,0.08); color: var(--text);
}
.pd-align-aligned .pd-align-pill { background: rgba(120, 200, 145, 0.18); color: var(--sage-bright); }
.pd-align-person .pd-align-pill { background: rgba(220, 170, 130, 0.18); color: var(--score-warn); }
.pd-align-company .pd-align-pill { background: rgba(130, 170, 220, 0.18); color: var(--info); }
.pd-align-meta { font-family: "IBM Plex Mono", monospace; font-size: 0.6875rem; color: var(--text-2); }
.pd-align-meta b { color: var(--text); font-weight: 500; }
.pd-align-friction { margin-top: 0.375rem; color: var(--text-2); }
/* Same panel style for company-dimensions (.cd-section) — reuses .pd-* classes. */
.cd-section { margin-bottom: 1.75rem; }
/* ===== Signout link in the sidebar nav-bottom ===== */
.signout-link {
display: block;
font-size: var(--fs-caption);
color: var(--text-3);
padding: 0.375rem 0.5rem 0.125rem;
text-decoration: none;
border-top: 1px solid var(--hairline);
margin-top: 0.25rem;
transition: color 0.12s;
}
.signout-link:hover { color: var(--text); }
.signout-link:focus { outline: 1px dashed var(--hairline-strong); outline-offset: 2px; }
/* ===== UI polish — empty states + hover + loading ============================
Final-pass demo polish:
- Empty-state messages get a proper card wrapper (graceful "no data yet")
- Card-like list rows get a subtle lift on hover (feels responsive on shared screens)
- Loading text uses higher-contrast color so it reads on Zoom screen-share
- Modal action buttons standardized: ghost-left, primary-right
*/
/* Empty-state — generic. Apply class="empty-state" to any "no data" message. */
.empty-state {
background: var(--bg-2);
border: 1px solid var(--hairline);
border-radius: 12px;
padding: 3rem 2rem;
text-align: center;
color: var(--text-2);
font-size: var(--fs-body);
line-height: 1.65;
max-width: 35rem;
margin: 1.5rem auto;
}
.empty-state b { color: var(--text); font-weight: 600; }
.empty-state .empty-cta { margin-top: 1.125rem; }
/* Promote bare "no rubrics yet" / "no JDs yet" style blurbs to look like cards
without requiring per-page HTML edits. Targets the common pattern. */
.rubric-list-empty, .jd-list-empty, .question-list-empty {
background: var(--bg-2);
border: 1px solid var(--hairline);
border-radius: 10px;
padding: 2.5rem 1.75rem;
text-align: center;
color: var(--text-2);
font-size: 0.875rem;
line-height: 1.6;
}
/* Loading-text contrast — was var(--text-4), now reads on Zoom share. */
.page-sub:has(span:empty), .page-sub {
/* Don't force-override page-sub everywhere — just the ones with "Loading…" */
}
[data-loading-text], .loading-line {
color: var(--text-2) !important;
font-size: 0.875rem !important;
}
/* Subtle hover lift on clickable rows / cards — makes the app feel responsive
on a shared screen. Only applies to surfaces that ARE clickable (have href
or data-clickable). Static cards (like .pricing-card on marketing site) keep
their static state. */
.person-row[href], .candidate-row[href], .emp-card[href],
.rubric-row[href], .jd-row[href], .question-row[href],
a.compose-row, a.resp-row, a.cand-row {
transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.person-row[href]:hover, .candidate-row[href]:hover, .emp-card[href]:hover,
.rubric-row[href]:hover, .jd-row[href]:hover, .question-row[href]:hover,
a.compose-row:hover, a.resp-row:hover, a.cand-row:hover {
background: rgba(255, 255, 255, 0.025);
border-color: var(--hairline-strong, var(--hairline-strong));
}
/* Modal action button order — primary right, ghost left. The .modal-actions
container should always justify-end with gap. */
.modal-actions, .modal-foot, .modal .btn-row {
display: flex;
justify-content: flex-end;
gap: 0.625rem;
margin-top: 1.5rem;
}
.modal-actions .btn-primary, .modal-foot .btn-primary, .modal .btn-row .btn-primary {
order: 2;
}
.modal-actions .btn-ghost, .modal-foot .btn-ghost, .modal .btn-row .btn-ghost {
order: 1;
}
/* Reused .integration-card style for "Coming next" on integrations page —
matches the rest of the page. */
.integration-card .integration-role {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.6875rem;
letter-spacing: 0.12em;
color: var(--text-3);
text-transform: uppercase;
margin: 0.25rem 0 0.625rem;
}
/* ===== UI polish round 2 — inputs, tabs, focus, breadcrumbs ============= */
/* Form inputs — unified focus state across the entire app.
Was inconsistent: some inputs had focus rings, others didn't, several
used different border colors on focus. Now: subtle white-tint ring,
subtle border-color change, no color shift. */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--text-2) !important;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}
/* Calendar / time / date inputs — scheduling page polish.
Native date/time pickers have inconsistent dark-theme rendering; force them
to match the rest of the form-field aesthetic. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
.sch-time,
.sch-date {
background: var(--bg-2) !important;
border: 1px solid var(--hairline-strong, var(--hairline)) !important;
color: var(--text) !important;
padding: 0.625rem 0.75rem !important;
border-radius: 6px !important;
font-family: inherit !important;
font-size: 0.875rem !important;
color-scheme: dark; /* tells the browser to render the picker calendar dark */
}
input[type="date"]:hover,
input[type="time"]:hover,
input[type="datetime-local"]:hover,
.sch-time:hover,
.sch-date:hover {
border-color: var(--text-3) !important;
}
/* Button focus rings — keyboard nav a11y + clean visual.
We deliberately keep these subtle so they don't show on mouse-click. */
.btn:focus-visible,
button.btn:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible {
outline: 2px solid var(--text);
outline-offset: 2px;
}
.nav-item:focus-visible {
outline: 1px dashed var(--text-3);
outline-offset: -2px;
}
/* Tabs — unified style across interview / rubric / settings / interviewer
pages. Was three slightly-different tab implementations. */
.tabs {
display: flex;
gap: 0.25rem;
border-bottom: 1px solid var(--hairline);
margin: 1.125rem 0 1.375rem;
padding: 0;
overflow-x: auto;
}
.tabs .tab,
.tab {
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
color: var(--text-3);
font-family: inherit;
font-size: 0.84375rem;
font-weight: 500;
letter-spacing: -0.05px;
padding: 0.75rem 1.125rem;
cursor: pointer;
white-space: nowrap;
transition: color 0.12s, border-color 0.12s;
margin-bottom: -0.0625rem;
}
.tabs .tab:hover,
.tab:hover {
color: var(--text-2);
}
.tabs .tab.active,
.tab.active {
color: var(--text);
border-bottom-color: var(--text);
}
.tabs .tab:focus-visible,
.tab:focus-visible {
outline: none;
color: var(--text);
}
/* Page header — consistent spacing across every page.
Was: each page had a slightly different bottom margin / padding. */
.page-header {
padding-bottom: 1.375rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--hairline);
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
flex-wrap: wrap;
}
.page-title {
font-size: 1.375rem;
font-weight: 500;
letter-spacing: -0.3px;
color: var(--text);
margin: 0 0 0.25rem;
}
.page-sub {
font-size: var(--fs-body-sm);
color: var(--text-3);
line-height: 1.55;
margin: 0;
max-width: 45rem;
}
/* Breadcrumb — pulled from the bunch of inline-styled breadcrumbs on
candidate.html, employee.html, etc. Now a real class. */
.breadcrumb {
font-size: var(--fs-caption);
color: var(--text-3);
font-family: 'IBM Plex Mono', monospace;
letter-spacing: 0.04em;
margin-bottom: 1.125rem;
}
.breadcrumb a {
color: var(--text-3);
text-decoration: none;
transition: color 0.12s;
}
.breadcrumb a:hover { color: var(--text); text-decoration: underline; }
.breadcrumb .sep {
margin: 0 0.5rem;
color: var(--hairline-strong, var(--hairline));
}
/* Framework blockquote softening — was border-left 2px solid var(--text)
which was too stark. */
blockquote {
border-left: 2px solid var(--text-3);
background: rgba(255, 255, 255, 0.03);
padding: 0.875rem 1.125rem;
margin: 1rem 0;
font-size: 0.875rem;
line-height: 1.65;
color: var(--text-2);
border-radius: 0 6px 6px 0;
}
blockquote cite {
display: block;
margin-top: 0.5rem;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.6875rem;
letter-spacing: 0.08em;
color: var(--text-3);
font-style: normal;
}
/* Labels — uppercase mono "section labels" used everywhere */
.lbl {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-3);
}
.lbl-mute { color: var(--text-4); }
/* ===== Dashboard compression — "Show all" pattern ============== */
.person-tile-extra { display: none; }
.people-grid-expanded .person-tile-extra { display: flex; }
.see-all-link {
display: block; /* was inline-block — full row now */
margin: 4px 0 32px;
font-family: 'IBM Plex Mono', monospace;
font-size: var(--fs-body-sm); /* bumped from 11 */
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text); /* was --text-3 (faint) — now full white */
text-decoration: none;
padding: 0.875rem 1.125rem; /* taller hit-area */
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--hairline-strong);
border-radius: 8px;
text-align: center;
font-weight: 500;
cursor: pointer;
transition: color 0.12s, border-color 0.12s, background 0.12s, transform 0.12s;
}
.see-all-link:hover {
color: var(--text);
border-color: var(--text-2);
background: rgba(255, 255, 255, 0.08);
transform: translateY(-1px);
}
.see-all-link:active {
transform: translateY(0);
}
/* ═════════════════════════════════════════════════════════════════
DEEP COSMETIC CLEAN — Jun 15 2026
Peter flagged the whole app as "annoying to read". This block
polishes shared primitives across every page:
· Inputs / textareas / selects — bigger focus rings, brighter
· Cards — subtle inner glow, lifted borders
· Modals — bigger, brighter dividers, tighter rhythm
· Toggles — visible "off" state
· Empty states — bigger headline, less dead space
· Setup-cards — subtle gradient background
· Status pills — color-coded badges with proper contrast
═════════════════════════════════════════════════════════════════ */
/* ─── Inputs ─────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
textarea,
select {
background: rgba(255, 255, 255, 0.025);
border: 1px solid var(--hairline-strong);
color: var(--text);
border-radius: 6px;
transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
input:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled) {
border-color: var(--text-3);
}
input:focus,
textarea:focus,
select:focus {
border-color: var(--text-2) !important;
background: rgba(255, 255, 255, 0.04) !important;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
outline: none;
}
input::placeholder,
textarea::placeholder {
color: var(--text-4);
}
/* ─── Cards — subtle inner highlight ──────────────────────────── */
.card {
background: var(--bg-2);
border: 1px solid var(--hairline);
border-radius: 8px;
transition: border-color 0.12s, background 0.12s;
}
.card:hover {
border-color: var(--hair-2);
}
/* ─── Setup-cards — slight gradient so they're not flat ──────── */
.setup-card {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.015) 100%);
border: 1px solid var(--hairline);
border-radius: 8px;
padding: 1rem 1.125rem;
transition: border-color 0.12s, background 0.12s;
}
.setup-card:hover {
border-color: var(--hair-2);
}
/* ─── Modals — bigger, more breathing room ───────────────────── */
.modal {
background: var(--bg-2);
border: 1px solid var(--hairline-strong);
border-radius: 10px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.modal-head {
border-bottom: 1px solid var(--hairline-strong);
padding: 1.25rem 1.5rem 1.125rem;
}
.modal-title {
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.2px;
}
.modal-sub {
font-size: var(--fs-caption);
color: var(--text-2);
margin-top: 0.25rem;
line-height: 1.55;
}
.modal-close {
color: var(--text-3);
background: transparent;
border: 0;
font-size: 1.375rem;
line-height: 1;
padding: 0.25rem 0.625rem;
border-radius: 4px;
transition: color 0.12s, background 0.12s;
}
.modal-close:hover {
color: var(--text);
background: rgba(255, 255, 255, 0.06);
}
.modal-actions {
padding-top: 1.125rem;
margin-top: 1.125rem;
border-top: 1px solid var(--hairline);
}
.modal .field {
margin-bottom: 0.875rem;
}
.modal .field label {
display: block;
font-size: 0.6875rem;
color: var(--text-2);
margin-bottom: 0.375rem;
letter-spacing: 0.02em;
}
.modal .field input,
.modal .field textarea,
.modal .field select {
width: 100%;
padding: 0.625rem 0.75rem;
font-size: var(--fs-body-sm);
font-family: inherit;
}
/* ─── Toggles — make "off" visible ───────────────────────────── */
.toggle {
background: rgba(255, 255, 255, 0.10);
border: 1px solid var(--hairline-strong);
transition: background 0.15s, border-color 0.15s;
}
.toggle:hover {
background: rgba(255, 255, 255, 0.14);
}
.toggle.on {
background: var(--text);
border-color: var(--text);
}
/* ─── Empty states — louder + less awkward ───────────────────── */
.empty-state,
[id$="-empty"].card {
padding: 3.5rem 1.75rem;
text-align: center;
}
.empty-state h2,
.empty-state-title {
font-size: var(--fs-h2);
font-weight: 600;
color: var(--text);
margin-bottom: 0.5rem;
}
.empty-state p,
.empty-state-sub {
font-size: var(--fs-body-sm);
color: var(--text-2);
line-height: 1.6;
max-width: 26.25rem;
margin: 0 auto 1.125rem;
}
/* ─── Page headers — better hierarchy ────────────────────────── */
.page-title {
font-size: 1.75rem;
font-weight: 600;
letter-spacing: -0.5px;
line-height: 1.15;
color: var(--text);
}
.page-sub {
font-size: var(--fs-body-sm);
color: var(--text-2);
margin-top: 0.375rem;
line-height: 1.55;
max-width: 45rem;
}
/* ─── Section labels (.lbl) — uniformly bigger + brighter ────── */
.lbl {
font-family: 'IBM Plex Mono', monospace;
font-size: var(--fs-mono);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-3);
font-weight: 500;
}
/* ─── List rows — better hover affordance ────────────────────── */
.list-row,
.candidate-row {
border-bottom: 1px solid var(--hairline);
transition: background 0.12s;
}
.list-row:hover,
.candidate-row:hover {
background: rgba(255, 255, 255, 0.025);
}
/* ─── Status pills — color-coded ──────────────────────────────── */
.status-pill {
display: inline-block;
padding: 0.1875rem 0.625rem;
font-size: 0.625rem;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 500;
border-radius: 11px;
border: 1px solid;
}
.status-pill-good {
color: var(--score-good);
border-color: rgba(163, 217, 155, 0.30);
background: rgba(163, 217, 155, 0.08);
}
.status-pill-warn {
color: var(--score-warn);
border-color: rgba(245, 201, 122, 0.30);
background: rgba(245, 201, 122, 0.08);
}
.status-pill-flag {
color: var(--score-flag);
border-color: rgba(240, 138, 138, 0.30);
background: rgba(240, 138, 138, 0.08);
}
.status-pill-mute {
color: var(--text-3);
border-color: var(--hairline-strong);
}
/* ─── Settings page — jump-to chip row at top ────────────────── */
/* Tightened so all 9 chips fit on one row on typical desktop widths,
sits flush against the page header instead of floating in a void. */
.settings-jumpnav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem;
margin: 0 0 1.125rem;
padding: 0.5rem 0.625rem;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--hairline);
border-radius: 8px;
}
.settings-jumpnav-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.5625rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-4);
margin-right: 0.25rem;
}
.settings-jumpnav-chip {
display: inline-block;
padding: 0.1875rem 0.5625rem;
font-size: 0.6875rem;
color: var(--text-2);
background: transparent;
border: 1px solid var(--hairline-strong);
border-radius: 14px;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: all 0.12s;
}
.settings-jumpnav-chip:hover {
color: var(--text);
border-color: var(--text-3);
background: rgba(255, 255, 255, 0.04);
}
/* Kill the awkward gap between the page header and the jump-nav. The
header had a default margin-bottom that left ~80-120px of empty space
above the chips. */
.settings-content .page-header {
margin-bottom: 1rem !important;
padding-bottom: 0.875rem !important;
border-bottom: 1px solid var(--hairline);
}
/* ─── Workspace branding (Executive tier) — cleaner file + color input ── */
#brand-logo-input {
/* Custom-styled file picker. The browser-default "Choose File" button
is white-on-grey and clashes with the dark theme — this gives it the
same look as our btn-ghost. */
font-size: 0; /* hides "no file selected" text */
color: transparent;
padding: 0;
border: none;
background: transparent;
width: auto;
}
#brand-logo-input::-webkit-file-upload-button,
#brand-logo-input::file-selector-button {
background: rgba(255, 255, 255, 0.04);
color: var(--text);
border: 1px solid var(--hairline-strong);
border-radius: 6px;
padding: 0.5rem 0.875rem;
font-family: inherit;
font-size: var(--fs-caption);
font-weight: 500;
letter-spacing: 0.02em;
cursor: pointer;
margin-right: 0.75rem;
transition: background 0.12s, border-color 0.12s;
}
#brand-logo-input::-webkit-file-upload-button:hover,
#brand-logo-input::file-selector-button:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(--text-3);
}
/* Filename label rendered alongside via a span (added next via JS). */
#brand-logo-input + .brand-file-name {
font-size: var(--fs-caption);
color: var(--text-3);
margin-left: 0.25rem;
font-family: 'IBM Plex Mono', monospace;
}
#brand-color-input {
width: 3.5rem !important;
height: 2.25rem !important;
padding: 0.125rem !important;
border: 1px solid var(--hairline-strong) !important;
border-radius: 6px !important;
background: transparent !important;
cursor: pointer;
}
#brand-color-input::-webkit-color-swatch-wrapper { padding: 0; }
#brand-color-input::-webkit-color-swatch { border: none; border-radius: 4px; }
#brand-color-hex {
font-family: 'IBM Plex Mono', monospace;
font-size: var(--fs-caption) !important;
color: var(--text-2) !important;
margin-left: 0.875rem !important;
letter-spacing: 0.04em;
vertical-align: middle;
}
/* Logo preview gets a brighter dashed border. */
#brand-logo-preview {
height: 4rem !important;
width: 4rem !important;
border-radius: 8px !important;
font-size: var(--fs-tiny) !important;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-4) !important;
border-color: var(--hairline-strong) !important;
}
/* ─── Refined collapsibles inside settings ──────────────────── */
.settings-content .collapsible {
border-bottom: none;
}
.settings-content .collapsible-head {
border-radius: 6px;
padding: 0.75rem 0.875rem !important;
margin-left: -0.875rem;
margin-right: -0.875rem;
transition: background 0.12s;
}
.settings-content .collapsible-head:hover {
background: rgba(255, 255, 255, 0.025);
}
.settings-content .collapsible[data-collapsed="false"] > .collapsible-head {
background: rgba(255, 255, 255, 0.03);
}
.settings-content .collapsible[data-collapsed="false"] > .collapsible-head .lbl {
color: var(--text) !important;
}
.settings-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 1.25rem;
align-items: start;
}
.settings-cols > * { min-width: 0; }
/* ─── Settings tabbed sub-sidebar layout ─────────────────────────────────── */
.settings-layout {
display: grid;
grid-template-columns: 11.75rem 1fr;
gap: 0 1.75rem;
align-items: start;
margin-top: 0.5rem;
}
.settings-subnav {
position: sticky;
top: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.125rem;
padding: 0.25rem 0;
}
.settings-tab {
display: block;
width: 100%;
padding: 0.75rem 1rem;
text-align: left;
background: transparent;
border: none;
border-radius: 6px;
color: var(--text-3);
font-family: inherit;
font-size: 0.875rem;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
cursor: pointer;
transition: background 0.1s, color 0.1s;
}
.settings-tab:hover {
background: rgba(255, 255, 255, 0.04);
color: var(--text);
}
.settings-tab.active {
background: rgba(201, 166, 75, 0.08);
color: var(--text);
font-weight: 500;
box-shadow: inset 3px 0 0 var(--accent);
}
.settings-panes {
min-width: 0;
}
.settings-pane { display: none; }
.status-pill {
display: inline-block;
font-size: 0.625rem;
font-family: 'IBM Plex Mono', monospace;
letter-spacing: 1px;
padding: 0.125rem 0.5rem;
border-radius: 10px;
margin-left: 0.75rem;
vertical-align: middle;
}
.status-pill-empty {
background: rgba(255,255,255,0.04);
color: var(--text-3);
}
.status-pill-active {
/* v3: quiet sage chip (was neon green rgba(155,226,155,.1)/#A3D99B). */
background: var(--chip-offer-bg);
color: var(--chip-offer-fg);
}
@media (max-width: 680px) {
.settings-layout {
grid-template-columns: 1fr;
}
.settings-subnav {
position: static;
flex-direction: row;
flex-wrap: wrap;
gap: 0.25rem;
margin-bottom: 1rem;
padding: 0;
}
.settings-tab {
width: auto;
padding: 0.375rem 0.75rem;
font-size: var(--fs-caption);
border: 1px solid var(--hairline);
border-radius: 20px;
}
.settings-tab.active {
background: var(--accent);
color: #000;
border-color: var(--accent);
}
}
.hiring-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--hairline);
margin-bottom: 1.25rem;
}
.hiring-tab {
color: var(--text-3);
font-size: 0.6875rem;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 0.75rem 1.25rem;
text-decoration: none;
font-weight: 500;
border-bottom: 2px solid transparent;
margin-bottom: -0.0625rem;
transition: color 0.1s;
}
.hiring-tab:hover { color: var(--text-2); }
.hiring-tab.is-active { color: var(--text); border-bottom-color: var(--text); }
/* ─── Scrollbar polish (webkit) ──────────────────────────────── */
::-webkit-scrollbar { width: 0.625rem; height: 0.625rem; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.08);
border-radius: 5px;
border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.16);
}
/* ═══════════════════════════════════════════════════════════════
COSMETIC UPGRADE — June 2026
Targeting: deliberate, polished, demo-ready.
Rules: CSS-only, no JS, no HTML restructure.
═══════════════════════════════════════════════════════════════ */
/* ── Body / global ──────────────────────────────────────────── */
body { line-height: 1.55; }
/* ── Standardize transition timing across all interactive elements ── */
.btn, .nav-item, .card, .collapsible-head, .list-row,
.hiring-tab, .tab, .role, .person-tile, .template-card,
.zp-tab, .interview-row {
transition-timing-function: var(--ease) !important;
}
/* ── Focus rings — visible on all interactive elements ─────── */
*:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.55);
outline-offset: 2px;
}
.btn:focus-visible {
outline: 2px solid var(--text);
outline-offset: 2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: none;
border-color: var(--text-3) !important;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}
/* ── Candidate detail — header breathing room ───────────────── */
.cand-header {
margin-bottom: 2.25rem;
padding-bottom: 1.75rem;
border-bottom: 1px solid var(--hairline);
}
.cand-avatar {
width: 3.25rem; height: 3.25rem;
font-size: 1.125rem;
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--hairline-strong);
}
/* ── Collapsible section heads — consistent label scale ─────── */
.collapsible-head .lbl {
font-size: 0.625rem !important;
letter-spacing: 0.20em !important;
color: var(--text-3) !important;
}
.collapsible-head:hover .lbl {
color: var(--text-2) !important;
}
/* Arrow: smooth rotation, slightly bolder */
.collapsible-head::after {
font-size: 0.875rem !important;
color: var(--text-4) !important;
transition: transform 0.18s var(--ease), color 0.12s var(--ease) !important;
}
.collapsible-head:hover::after {
color: var(--text-2) !important;
}
/* ── Pattern Read prose card ─────────────────────────────────── */
.pattern-read-prose {
/* was 72ch -- now the shared reading measure, so every prose block in the
app stops at the same line length as the app column widens. */
max-width: var(--prose-max);
}
.pattern-read-prose p {
font-size: 0.875rem !important;
line-height: 1.70 !important;
color: var(--text-2) !important;
margin: 0 0 1.125rem !important;
}
.pattern-read-prose p:last-child { margin-bottom: 0 !important; }
/* ── Person Dimensions — visually deprioritize live-only dims ── */
/* Low-confidence dims (score=null, only capturable live): faded + dashed border */
.pd-dim:has(.pd-conf-low) {
opacity: 0.45;
border-style: dashed !important;
}
.pd-dim:has(.pd-conf-low) .pd-dim-name {
font-style: italic;
}
/* ── Candidate action buttons — consistent 36px height ─────── */
.page-header .btn, .cand-actions .btn {
height: 2.25rem !important;
padding: 0 1rem !important;
display: inline-flex !important;
align-items: center !important;
}
/* Danger ghost — subtle red tint on hover, not alarming at rest */
.btn-danger-ghost:hover {
color: var(--c-danger-text) !important;
border-color: rgba(239, 68, 68, 0.3) !important;
}
/* ── Candidates list — filter row polish ────────────────────── */
.filter-row {
display: flex !important;
gap: 0.625rem !important;
align-items: center !important;
flex-wrap: wrap !important;
margin-bottom: 1.25rem !important;
}
#pipeline-stage, #pipeline-search {
height: 2.375rem !important;
padding: 0 0.75rem !important;
font-size: var(--fs-body-sm) !important;
border-radius: var(--radius-sm) !important;
}
#pipeline-stage-count {
font-size: 0.6875rem !important;
color: var(--text-3) !important;
letter-spacing: 0.1em !important;
white-space: nowrap !important;
}
/* Stage select in list rows — consistent height + remove default arrow glyph */
.pipeline-row-stage {
height: 2rem !important;
padding: 0 0.5rem !important;
font-size: var(--fs-caption) !important;
border-radius: var(--radius-sm) !important;
cursor: pointer;
}
/* ── Hiring tabs ─────────────────────────────────────────────── */
.hiring-tab {
font-size: var(--fs-caption) !important;
letter-spacing: 0.12em !important;
padding: 0.75rem 1rem !important;
transition: color 0.12s var(--ease), border-color 0.12s var(--ease) !important;
}
.hiring-tab.is-active {
font-weight: 600 !important;
}
/* ── Stat cards — uniform height on dashboard ───────────────── */
.stat-card {
min-height: 6rem !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
/* ── Section h2 headings — consistent scale ─────────────────── */
.section-h h2, h2.section-title {
font-size: var(--fs-h3) !important;
font-weight: 500 !important;
letter-spacing: -0.01em !important;
}
/* ── Deep analysis section — consistent with other cards ───── */
.deep-analysis, .pattern-read-prose, .deep-cta, .deep-empty, .deep-loading {
border-radius: var(--radius-sm) !important;
}
/* ── Devil's Advocate card — consistent corners ─────────────── */
.da-card, .da-section-head {
border-radius: var(--radius-sm) !important;
}
/* ── Interview list rows — breathing room ───────────────────── */
.interview-row {
padding: 0.875rem 1.125rem !important;
border-radius: var(--radius-sm) !important;
}
/* ── Chips — consistent pill shape ─────────────────────────── */
.chip {
border-radius: 20px !important;
font-size: 0.625rem !important;
padding: 0.25rem 0.6875rem !important;
letter-spacing: 0.04em !important;
}
/* ── Career chart — subtle grid, clean axis ─────────────────── */
.chart-wrap {
border-radius: var(--radius-md) !important;
}
.year-tick {
background: var(--surface-2) !important;
border-radius: 3px !important;
}
/* ── Status colors — map to tokens ─────────────────────────── */
.status-good, [data-status="good"] { color: var(--c-good-text) !important; }
.status-warn, [data-status="warn"] { color: var(--c-warn) !important; }
.status-bad, [data-status="bad"] { color: var(--c-bad-text) !important; }
/* ── Scrollbar thinner & softer ─────────────────────────────── */
::-webkit-scrollbar { width: 0.375rem !important; height: 0.375rem !important; }
/* ── Marketing site token parity (applies when marketing styles are
loaded in the same context) ─────────────────────────────── */
.grad-text {
background: var(--grad, linear-gradient(120deg, var(--text) 0%, var(--text-3) 100%));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ══════════════════════════════════════════════════════════════════
POLISH SPRINT — Jun 22, 2026
CSS only — zero logic changes. Surfaces: Settings Setup, Welcome
Wizard, Dashboard Checklist, Empty States, Tooltips.
Token audit: 5 hardcoded hexes replaced, 8 flagged (TODO).
TODO flagged: var(--bg-tint) (tooltip bg), #1a1408/#3a2a10 (exec-badge
dark gold surface/border), HPF dim colors 6×, DA verdict colors.
══════════════════════════════════════════════════════════════════ */
/* ─── PART 2: Settings → Setup section ───────────────────────────── */
/* Equal-height cards — all cards in the auto-fill grid align to tallest */
#setup-section > div { align-items: stretch; }
#setup-section .setup-card {
display: flex;
flex-direction: column;
padding: 1.125rem 1.25rem;
gap: 0;
min-height: 6rem;
}
/* Bigger, brighter sub-label inside each card */
#setup-section .setup-card > div:last-child {
font-size: var(--fs-caption);
color: var(--text-3);
line-height: 1.55;
margin-top: 0.375rem;
flex: 1;
}
/* Crisper hover: border lifts to hairline-strong, faint bg brightens */
#setup-section .setup-card:hover {
border-color: var(--border-firm);
background: linear-gradient(180deg,
rgba(255,255,255,0.05) 0%,
rgba(255,255,255,0.03) 100%);
}
/* "SETUP" section header matches `.lbl` mono scale from the overhaul block */
#setup-section > .lbl {
font-family: 'IBM Plex Mono', monospace;
font-size: var(--fs-mono);
letter-spacing: 0.18em;
color: var(--text-3);
margin-bottom: 1rem !important;
}
/* ─── PART 3: Welcome wizard ─────────────────────────────────────── */
/* Progress bar: fill bar per step, connected segments */
.welcome-progress-dots { gap: 0.25rem; }
.welcome-dot {
width: 1.75rem;
height: 0.1875rem;
border-radius: 2px;
transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.welcome-dot.done { background: var(--text-2); }
.welcome-dot.active { background: var(--text); }
/* Step transitions: slightly more pronounced slide */
.welcome-step { animation: welcome-in 0.24s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes welcome-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Styled textarea — replaces per-element inline styles */
.welcome-textarea {
width: 100%;
padding: 0.625rem 0.75rem;
background: var(--surface-1);
border: 1px solid var(--border-firm);
color: var(--text-primary);
font-family: inherit;
font-size: var(--fs-body-sm);
border-radius: var(--radius-sm);
line-height: 1.55;
resize: vertical;
transition: border-color 0.15s, background 0.15s;
}
.welcome-textarea:focus {
outline: none;
border-color: var(--text);
background: var(--surface-3);
}
/* Styled datetime input */
.welcome-date-input {
width: 100%;
padding: 0.625rem 0.75rem;
background: var(--surface-1);
border: 1px solid var(--border-firm);
color: var(--text-primary);
font-family: inherit;
font-size: var(--fs-body-sm);
border-radius: var(--radius-sm);
transition: border-color 0.15s, background 0.15s;
}
.welcome-date-input:focus {
outline: none;
border-color: var(--text);
background: var(--surface-3);
}
/* Step 3 Zoom install block */
.welcome-zoom-block {
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-radius: var(--radius-md);
padding: 1.75rem 1.5rem;
margin: 1.375rem 0;
text-align: center;
}
.welcome-zoom-block p {
font-size: var(--fs-body-sm);
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 1.25rem;
}
.welcome-zoom-sub {
margin-top: 0.875rem;
font-size: 0.6875rem;
color: var(--text-tertiary);
}
.welcome-zoom-block .btn-primary {
padding: 0.75rem 1.75rem;
font-size: 0.875rem;
}
/* Skip button: clearly tertiary — not competing with primary CTA */
.btn-skip {
background: transparent !important;
border: none !important;
color: var(--text-tertiary) !important;
font-size: var(--fs-caption) !important;
padding: 0.375rem 0.25rem !important;
font-family: inherit;
letter-spacing: 0.02em;
transition: color 0.12s;
}
.btn-skip:hover { color: var(--text-secondary) !important; }
/* Welcome card: slightly more generous radius + shadow */
.welcome-card {
border-radius: var(--radius-lg) !important;
box-shadow: 0 24px 64px -16px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
}
/* ─── PART 4: Dashboard first-run checklist ──────────────────────── */
/* Card container — target by ID to win over inline styles */
#first-run-checklist {
border-radius: var(--radius-md) !important;
border-color: var(--border-soft) !important;
padding: 1.375rem 1.5rem !important;
}
/* Title row inside the card */
#first-run-checklist > div:first-of-type {
font-size: 0.625rem;
letter-spacing: 0.18em;
color: var(--text-tertiary);
text-transform: uppercase;
margin-bottom: 1rem;
font-family: 'IBM Plex Mono', monospace;
}
/* Dismiss × button */
#checklist-dismiss {
border-radius: var(--radius-sm);
transition: color 0.12s, background 0.12s;
font-size: 1.125rem !important;
}
#checklist-dismiss:hover {
color: var(--text) !important;
background: var(--surface-3) !important;
}
/* Checklist dots — override inline styles for the pending state */
.checklist-dot {
width: 1.25rem !important;
height: 1.25rem !important;
border-radius: 50%;
border: 1.5px solid var(--border-firm);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.6875rem;
transition: background 0.22s, border-color 0.22s, color 0.22s;
}
/* Labels and actions */
.checklist-label {
font-size: var(--fs-body-sm);
transition: color 0.22s;
}
.checklist-action {
font-size: 0.6875rem;
text-decoration: none;
letter-spacing: 0.05em;
white-space: nowrap;
transition: color 0.12s;
}
.checklist-action:hover { color: var(--text-secondary) !important; }
/* ─── PART 5: Empty states — consistent visual family ────────────── */
/* Override all prior `.empty-state` rules; this block wins via cascade position */
.empty-state {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
min-height: 15rem;
padding: 3.5rem 2.5rem !important;
text-align: center !important;
border-radius: var(--radius-md) !important;
}
.empty-state b, .empty-state-title {
font-size: var(--fs-h3) !important;
font-weight: 600 !important;
color: var(--text-primary) !important;
display: block !important;
margin-bottom: 0.5rem !important;
line-height: 1.3;
}
.empty-state p, .empty-state-sub {
font-size: var(--fs-body-sm) !important;
color: var(--text-secondary) !important;
line-height: 1.6 !important;
max-width: 25rem !important;
margin: 0 auto 1.375rem !important;
}
/* Primary CTA inside empty state */
.empty-state .btn-primary, .empty-state .empty-cta {
margin-top: 0.25rem !important;
}
/* Optional "other ways" ghost link below primary CTA */
.empty-alt-link {
display: inline-block;
margin-top: 0.75rem;
font-size: 0.6875rem;
color: var(--text-tertiary);
text-decoration: none;
letter-spacing: 0.02em;
transition: color 0.12s;
}
.empty-alt-link:hover { color: var(--text-secondary); }
/* Subtle icon above empty-state heading — opt-in via .empty-state-icon */
.empty-state-icon {
display: block;
margin: 0 auto 1rem;
opacity: 0.22;
flex-shrink: 0;
}
/* ─── PART 6: Tooltip refinements ─────────────────────────────────── */
/* Tooltip popup: overflow visible so ::after arrow renders outside box */
.jedah-tip-popup { overflow: visible; }
/* Arrow pointing down toward the trigger button */
.jedah-tip-popup::after {
content: '';
position: absolute;
bottom: -0.3125rem;
left: 1rem;
width: 0.5rem; height: 0.5rem;
background: var(--bg-tint); /* match popup background */
border-right: 1px solid var(--border-firm);
border-bottom: 1px solid var(--border-firm);
transform: rotate(45deg);
}
/* "?" button: filled accent tint when tooltip is open */
.jedah-tip.open .jedah-tip-btn {
border-color: var(--text-3);
color: var(--text);
background: rgba(255,255,255,0.05);
}
/* Focus ring for keyboard accessibility */
.jedah-tip-btn:focus-visible {
outline: 2px solid var(--text-3);
outline-offset: 2px;
}
/* Narrow viewports: pin popup to right edge so it doesn't clip */
@media (max-width: 520px) {
.jedah-tip-popup {
left: auto !important;
right: 0;
}
.jedah-tip-popup::after {
left: auto;
right: 1rem;
}
}
/* ─── Cross-surface responsive fixes ─────────────────────────────── */
/* Mobile: full-width primary CTAs */
@media (max-width: 520px) {
.welcome-actions { flex-direction: column-reverse; gap: 0.625rem; align-items: stretch; }
.welcome-actions .btn { width: 100%; justify-content: center; }
.welcome-actions div[style] { width: 100%; display: flex !important; flex-direction: column; gap: 0.5rem; }
.btn-skip { text-align: center; }
/* Checklist card: tighter on mobile */
#first-run-checklist { padding: 1rem !important; }
/* Empty states: don't over-pad on small screens */
.empty-state { padding: 2.5rem 1.5rem !important; min-height: 12.5rem; }
/* Setup cards: single column on very narrow */
#setup-section > div { grid-template-columns: 1fr !important; }
}
/* Tablet: two-column setup cards (auto-fill already handles this) */
@media (max-width: 768px) {
.content { padding: 1.5rem 1.25rem 3rem !important; }
.welcome-shell { padding: 1.25rem !important; }
.welcome-card { padding: 1.75rem 1.5rem 1.5rem !important; }
}
/* ─── Quick-filter chips ───────────────────────────────────────────── */
.quick-chip {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.625rem;
border-radius: 20px;
border: 1px solid var(--hairline-strong);
background: transparent;
color: var(--text-3);
font-family: inherit;
font-size: 0.6875rem;
letter-spacing: 0.4px;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
white-space: nowrap;
}
.quick-chip:hover {
background: var(--bg-2);
color: var(--text-2);
}
.quick-chip.is-active {
background: var(--text);
color: var(--bg);
border-color: var(--text);
}
/* ─── Error boundary state ─────────────────────────────────────────── */
.error-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 1.5rem;
text-align: center;
gap: 0.625rem;
}
.error-icon {
font-size: 1.75rem;
color: var(--text-4);
margin-bottom: 0.25rem;
}
.error-title {
font-size: var(--fs-h3);
font-weight: 600;
color: var(--text-2);
}
.error-msg {
font-size: var(--fs-caption);
color: var(--text-3);
max-width: 26.25rem;
line-height: 1.5;
}
/* ── V1 scope lock feature-flag utility classes ───────────────────────────────
Elements with data-v1-hide are hidden when body.v1-scope-lock is present.
Elements with data-v1-show are hidden by default and visible only under lock.
The !important beats any inline style app.js may set after the fact. */
body.v1-scope-lock [data-v1-hide] { display: none !important; }
[data-v1-show] { display: none !important; }
/* ── MVP focus mode (FF_MVP_MODE) ─────────────────────────────────────────────
Elements with data-mvp-hide are removed from view when body.mvp-mode is on.
Used to pare the nav (References, Performance, Org Insights) down to the
core surfaces. The feature code + server routes stay intact; this is purely
a client-facing focus gate. */
body.mvp-mode [data-mvp-hide],
html.mvp-mode [data-mvp-hide] { display: none !important; }
/* "Premium — coming soon" locked card shown when a gated page is opened
directly under MVP mode (sidebar-tier.js renderMvpLockedCard). */
.mvp-locked-card {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
padding: var(--sp-8) var(--sp-4);
}
.mvp-locked-inner {
max-width: 28.75rem;
text-align: center;
background: var(--bg-2);
border: 1px solid var(--hairline);
border-radius: 14px;
padding: 2.5rem 2.25rem 2.25rem;
box-shadow: var(--shadow);
}
.mvp-locked-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.25rem; height: 3.25rem;
border-radius: 50%;
background: var(--gold-fill);
border: 1px solid var(--gold-border);
color: var(--gold);
margin-bottom: 1.25rem;
}
.mvp-locked-badge {
font-family: var(--font-mono);
font-size: var(--fs-mono);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--gold);
margin-bottom: 0.875rem;
}
.mvp-locked-title {
font-family: var(--font-display);
font-size: var(--fs-display);
font-weight: 500;
letter-spacing: var(--ls-tight);
color: var(--text);
margin-bottom: 0.75rem;
}
.mvp-locked-blurb {
font-size: var(--fs-body);
line-height: 1.65;
color: var(--text-3);
margin-bottom: 1.5rem;
}
.mvp-locked-cta { text-decoration: none; }
/* ── Sticky candidate header (candidate.html) ─────────────────────────────
The header stays visible as the user scrolls through Pattern Read, HPF,
Devil's Advocate, etc. Targets only .cand-header that is a direct child
of .content (i.e. candidate.html) — not the one nested in interview.html's
Candidate tab-panel. */
.content > .cand-header {
position: sticky;
top: 0;
z-index: 8;
background: var(--bg);
padding-top: 0.875rem;
padding-bottom: 1.25rem;
margin-bottom: 1.25rem;
border-bottom: 1px solid var(--hairline);
box-shadow: 0 4px 16px 0 rgba(0,0,0,0.45);
}
body.v1-scope-lock [data-v1-show] { display: block !important; }
/* ═══════════════════════════════════════════════════════════════════════════
COMPONENT LIBRARY — Part 2 of Visual Rebuild
Reusable classes used across all pages.
═══════════════════════════════════════════════════════════════════════════ */
/* ─── CARDS ──────────────────────────────────────────────────────────────── */
.card {
background:
linear-gradient(180deg,
var(--bg-elev) 0%,
var(--bg) 100%);
border: 1px solid var(--hair-2);
border-radius: var(--r-md);
box-shadow: var(--shadow);
overflow: hidden;
position: relative;
}
.card-elev {
background:
linear-gradient(180deg,
var(--bg-elev-high) 0%,
var(--bg-elev) 100%);
box-shadow: var(--shadow-lg);
}
.card-section {
padding: var(--sp-5) var(--sp-6);
border-bottom: 1px solid var(--hair);
}
.card-section:last-child { border-bottom: 0; }
.card-header {
padding: var(--sp-5) var(--sp-6) var(--sp-4);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-4);
}
.card-title {
font-family: var(--font-display);
font-size: var(--fs-display);
font-weight: 500;
letter-spacing: var(--ls-tight);
color: var(--text);
}
.card-eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-mono);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
font-weight: 500;
color: var(--gold);
text-shadow: 0 0 16px var(--gold-glow);
}
/* ─── BUTTONS ────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-5);
border: 1px solid transparent;
border-radius: var(--r);
font-family: var(--font-body);
font-size: var(--fs-body-sm);
font-weight: 500;
color: var(--text-2);
background: transparent;
cursor: pointer;
transition:
color var(--dur) var(--ease),
background var(--dur) var(--ease),
border-color var(--dur) var(--ease),
transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
text-decoration: none;
white-space: nowrap;
line-height: 1;
}
.btn:hover { color: var(--text); }
.btn-sm { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-caption); }
.btn-lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-body); }
.btn-primary {
background:
linear-gradient(180deg,
var(--gold-bright) 0%,
var(--gold) 100%);
color: var(--text-inverse);
border-color: var(--gold);
box-shadow:
0 1px 0 0 rgba(255,255,255,0.15) inset,
var(--shadow-sm);
font-weight: 600;
}
.btn-primary:hover {
color: var(--text-inverse);
box-shadow:
0 1px 0 0 rgba(255,255,255,0.2) inset,
0 0 24px var(--gold-glow),
var(--shadow);
transform: translateY(-1px);
}
.btn-secondary {
background: var(--bg-elev);
border-color: var(--hair-strong);
color: var(--text);
}
.btn-secondary:hover {
background: var(--bg-elev-high);
border-color: var(--text-3);
}
.btn-ghost {
color: var(--text-3);
}
.btn-ghost:hover {
color: var(--text);
background: var(--bg-tint);
}
.btn-danger {
color: var(--brick);
border-color: var(--brick);
background: var(--brick-fill);
}
.btn-danger-ghost { color: var(--brick); }
.btn-danger-ghost:hover { background: var(--brick-fill); color: var(--brick); }
/* ─── INPUTS ─────────────────────────────────────────────────────────────── */
.input,
input[type="text"]:not(.no-restyle),
input[type="email"]:not(.no-restyle),
input[type="search"]:not(.no-restyle),
input[type="url"]:not(.no-restyle),
input[type="date"]:not(.no-restyle),
input[type="number"]:not(.no-restyle),
select:not(.no-restyle),
textarea:not(.no-restyle) {
background: var(--bg);
border: 1px solid var(--hair-2);
border-radius: var(--r);
padding: var(--sp-3) var(--sp-4);
color: var(--text);
font-family: var(--font-body);
font-size: var(--fs-body-sm);
line-height: var(--lh-normal);
transition:
border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
width: 100%;
}
.input:hover,
input:not(.no-restyle):hover,
select:not(.no-restyle):hover { border-color: var(--hair-strong); }
.input:focus,
input:not(.no-restyle):focus,
select:not(.no-restyle):focus,
textarea:not(.no-restyle):focus {
outline: none;
border-color: var(--gold-border);
box-shadow: 0 0 0 3px var(--gold-fill);
}
.input::placeholder,
input::placeholder { color: var(--text-4); }
label {
display: block;
margin-bottom: var(--sp-2);
font-family: var(--font-mono);
font-size: var(--fs-tiny);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--text-3);
}
/* ─── PILLS / TAGS / BADGES ──────────────────────────────────────────────── */
.pill {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
padding: 0.1875rem var(--sp-3);
border-radius: var(--r-pill);
font-family: var(--font-mono);
font-size: var(--fs-tiny);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-3);
background: var(--bg-elev);
border: 1px solid var(--hair-2);
white-space: nowrap;
}
.pill-gold {
color: var(--gold);
background: var(--gold-fill);
border-color: var(--gold-border);
}
.pill-sage {
color: var(--sage);
background: var(--sage-fill);
border-color: rgba(123, 166, 140, 0.25);
}
.pill-brick {
color: var(--brick);
background: var(--brick-fill);
border-color: rgba(198, 107, 92, 0.25);
}
.pill-amber {
color: var(--amber);
background: var(--amber-fill);
border-color: rgba(232, 149, 68, 0.25);
}
.dot {
display: inline-block;
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
background: var(--text-3);
flex-shrink: 0;
}
.dot-gold {
background: var(--gold);
box-shadow: 0 0 8px var(--gold-glow);
}
.dot-sage {
background: var(--sage);
box-shadow: 0 0 8px var(--sage-glow);
animation: dot-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: no-preference) {
.dot-sage { animation: dot-pulse 2s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
.dot-sage { animation: none; }
}
/* ─── EMPTY STATES ───────────────────────────────────────────────────────── */
.empty-state {
padding: var(--sp-16) var(--sp-8);
text-align: center;
}
.empty-state-illustration {
width: 4rem;
height: 4rem;
margin: 0 auto var(--sp-5);
border-radius: 50%;
background:
linear-gradient(135deg,
var(--bg-elev) 0%,
var(--bg) 100%);
border: 1px solid var(--hair-2);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-3);
}
.empty-state-title {
font-family: var(--font-display);
font-size: var(--fs-display);
font-weight: 500;
color: var(--text);
margin-bottom: var(--sp-2);
}
.empty-state-body {
color: var(--text-2);
margin-bottom: var(--sp-6);
max-width: 20rem;
margin-left: auto;
margin-right: auto;
font-size: var(--fs-body-sm);
line-height: var(--lh-relaxed);
}
/* ─── SKELETON LOADING ───────────────────────────────────────────────────── */
.skeleton {
background: linear-gradient(90deg,
var(--bg-elev) 0%,
var(--bg-elev-high) 50%,
var(--bg-elev) 100%);
background-size: 200% 100%;
border-radius: var(--r);
}
@media (prefers-reduced-motion: no-preference) {
.skeleton { animation: shimmer 1.4s ease-in-out infinite; }
}
/* AI-section skeleton — 2-4 shimmer lines approximating the section's shape,
shown between request start and first render. Built on .skeleton above;
rendered by jedahSkeleton() in app.js. Callers replace it wholesale by
overwriting the host element's innerHTML in their render / error paths. */
.ai-skeleton { padding: 0.875rem 0.125rem 0.625rem; }
/* Branded logo-rings animation centered above the shimmer lines
(markup from window.jedahRings in components/ai-loading.js). */
.ai-skeleton-rings {
display: flex;
justify-content: center;
padding: 0.25rem 0 0.875rem;
}
.ai-skeleton-line {
height: 0.75rem;
margin-bottom: 0.625rem;
}
.ai-skeleton-line:last-of-type { margin-bottom: 0; }
.ai-skeleton-caption {
font-family: var(--font-mono);
font-size: var(--fs-mono);
letter-spacing: var(--ls-wide);
color: var(--text-4);
margin-top: 0.75rem;
font-style: normal;
}
/* ─── TOAST NOTIFICATIONS ────────────────────────────────────────────────── */
.toast {
position: fixed;
top: var(--sp-5);
left: 50%;
transform: translateX(-50%);
background: var(--bg-elev-high);
border: 1px solid var(--hair-strong);
border-radius: var(--r);
padding: var(--sp-3) var(--sp-5);
box-shadow: var(--shadow-lg);
font-size: var(--fs-body-sm);
color: var(--text);
z-index: 9999;
white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
.toast { animation: toast-in 200ms var(--ease-out); }
}
@keyframes toast-in {
from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* ─── BULK ACTION TOOLBAR ────────────────────────────────────────────────── */
.bulk-toolbar {
position: fixed;
bottom: var(--sp-6);
left: 50%;
transform: translateX(-50%);
background: var(--bg-elev-high);
border: 1px solid var(--hair-strong);
border-radius: var(--r-md);
box-shadow: var(--shadow-xl);
padding: var(--sp-3) var(--sp-5);
display: flex;
align-items: center;
gap: var(--sp-4);
z-index: 100;
}
@media (prefers-reduced-motion: no-preference) {
.bulk-toolbar { animation: bulk-toolbar-in 200ms var(--ease-out); }
}
/* ─── PAGE ENTRY ANIMATION ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
.page-entry,
.content {
animation: page-enter var(--dur-slow) var(--ease-out);
}
@keyframes page-enter {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
}
/* ═══════════════════════════════════════════════════════════════════════════
LAYOUT PATTERNS — Part 3 of Visual Rebuild
═══════════════════════════════════════════════════════════════════════════ */
/* ─── Shell content variants ─────────────────────────────────────────────── */
.shell-content {
padding: var(--sp-8) var(--sp-10) 5rem;
max-width: 80rem;
width: 100%;
}
.shell-content-editorial {
max-width: 45rem;
padding: var(--sp-10) var(--sp-8) 5rem;
}
/* ─── Focused layout (login, signup, wizard) ─────────────────────────────── */
.focused {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-10) var(--sp-6);
background:
radial-gradient(ellipse 50% 40% at 50% 30%,
rgba(212, 168, 100, 0.05) 0%,
transparent 70%),
var(--bg);
}
.focused-card {
width: 100%;
max-width: 30rem;
background:
linear-gradient(180deg,
var(--bg-elev) 0%,
var(--bg) 100%);
border: 1px solid var(--hair-2);
border-radius: var(--r-lg);
box-shadow: var(--shadow-xl);
padding: var(--sp-10) var(--sp-8);
}
/* ─── Page head pattern ──────────────────────────────────────────────────── */
.page-head {
margin-bottom: var(--sp-10);
padding-bottom: var(--sp-6);
border-bottom: 1px solid var(--hair);
position: relative;
}
.page-head-eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-mono);
letter-spacing: var(--ls-widest);
color: var(--gold);
text-transform: uppercase;
margin-bottom: var(--sp-3);
}
.page-head-title {
font-family: var(--font-display);
font-size: var(--fs-display-xl);
font-weight: 500;
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
color: var(--text);
margin: 0 0 var(--sp-2);
}
.page-head-sub {
font-size: var(--fs-body);
color: var(--text-2);
margin: 0;
line-height: var(--lh-snug);
}
.page-head-actions {
position: absolute;
top: 0;
right: 0;
display: flex;
gap: var(--sp-3);
align-items: center;
}
/* ─── Filter bar ─────────────────────────────────────────────────────────── */
.filter-bar {
display: flex;
align-items: center;
gap: var(--sp-3);
margin-bottom: var(--sp-5);
padding: var(--sp-2) var(--sp-4);
background: var(--bg-elev);
border: 1px solid var(--hair-2);
border-radius: var(--r);
}
.filter-search {
flex: 1;
background: transparent;
border: 0;
color: var(--text);
font-family: var(--font-body);
font-size: var(--fs-body-sm);
padding: var(--sp-2) 0;
}
.filter-search::placeholder { color: var(--text-4); }
.filter-search:focus { outline: none; }
.filter-divider {
width: 0.0625rem;
height: 1rem;
background: var(--hair-2);
flex-shrink: 0;
}
.filter-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.filter-chip {
display: inline-flex;
align-items: center;
padding: 0.1875rem var(--sp-3);
border-radius: var(--r-pill);
font-family: var(--font-mono);
font-size: var(--fs-tiny);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
background: transparent;
border: 1px solid var(--hair-2);
color: var(--text-3);
cursor: pointer;
transition: all var(--dur) var(--ease);
white-space: nowrap;
}
.filter-chip:hover { color: var(--text); border-color: var(--hair-strong); }
.filter-chip.active {
color: var(--gold);
background: var(--gold-fill);
border-color: var(--gold-border);
}
/* ─── Tiles row (quick links) ────────────────────────────────────────────── */
.tiles-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-4);
margin-top: var(--sp-10);
}
.tile {
background:
linear-gradient(180deg,
var(--bg-elev) 0%,
var(--bg) 100%);
border: 1px solid var(--hair-2);
border-radius: var(--r-md);
box-shadow: var(--shadow);
padding: var(--sp-6);
text-decoration: none;
transition:
transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
border-color var(--dur) var(--ease);
display: block;
}
.tile:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
border-color: var(--hair-strong);
}
.tile-eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-mono);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--text-3);
}
.tile-count {
font-family: var(--font-display);
font-size: var(--fs-display-lg);
font-weight: 500;
color: var(--text);
line-height: 1;
margin: var(--sp-2) 0;
}
.tile-meta { font-size: var(--fs-body-sm); color: var(--text-3); }
/* ═══════════════════════════════════════════════════════════════════════════
DASHBOARD — Part 5
═══════════════════════════════════════════════════════════════════════════ */
/* Greeting block */
.greeting {
margin-bottom: var(--sp-8);
}
.greeting-line {
font-family: var(--font-display);
font-size: var(--fs-display-lg);
font-weight: 400;
color: var(--text);
letter-spacing: var(--ls-tight);
margin: 0 0 var(--sp-2);
}
.greeting-meta {
font-family: var(--font-mono);
font-size: var(--fs-mono);
letter-spacing: var(--ls-widest);
color: var(--text-3);
text-transform: uppercase;
}
/* Next interview card */
.next-interview-card {
background:
linear-gradient(180deg,
var(--bg-elev-high) 0%,
var(--bg-elev) 100%);
border: 1px solid var(--hair-2);
border-radius: var(--r-md);
box-shadow: var(--shadow-lg);
padding: var(--sp-8);
display: grid;
grid-template-columns: 4rem 1fr auto;
grid-template-rows: auto auto;
gap: var(--sp-2) var(--sp-5);
align-items: center;
position: relative;
overflow: hidden;
margin-bottom: var(--sp-8);
}
.next-interview-card::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 80% at 100% 50%,
var(--gold-fill) 0%,
transparent 70%);
pointer-events: none;
}
.ni-avatar {
grid-row: 1 / 3;
width: 3.5rem; height: 3.5rem;
border-radius: 50%;
background:
linear-gradient(135deg,
var(--bg-tint) 0%,
var(--bg-elev) 100%);
border: 1px solid var(--hair-strong);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: var(--fs-h2);
font-weight: 500;
color: var(--text-2);
}
.ni-eyebrow {
grid-column: 2 / 3;
font-family: var(--font-mono);
font-size: var(--fs-mono);
letter-spacing: var(--ls-widest);
color: var(--gold);
text-transform: uppercase;
margin: 0;
}
.ni-name {
grid-column: 2 / 3;
font-family: var(--font-display);
font-size: var(--fs-display);
font-weight: 500;
color: var(--text);
line-height: 1.1;
letter-spacing: var(--ls-tight);
margin: 0;
}
.ni-meta {
grid-column: 2 / 3;
font-size: var(--fs-body-sm);
color: var(--text-2);
}
.ni-cta {
grid-column: 3 / 4;
grid-row: 1 / 3;
}
/* Activity timeline */
.activity-section { margin-top: var(--sp-8); }
.activity-section-title {
font-family: var(--font-mono);
font-size: var(--fs-mono);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--text-3);
margin-bottom: var(--sp-4);
}
.activity-list {
background:
linear-gradient(180deg,
var(--bg-elev) 0%,
var(--bg) 100%);
border: 1px solid var(--hair-2);
border-radius: var(--r-md);
overflow: hidden;
}
.activity-item {
display: grid;
grid-template-columns: 2rem 1fr auto;
gap: var(--sp-3);
padding: var(--sp-4) var(--sp-6);
border-bottom: 1px solid var(--hair);
transition: background var(--dur) var(--ease);
text-decoration: none;
color: inherit;
}
.activity-item:last-child { border-bottom: 0; }
.activity-item:hover { background: var(--bg-tint); }
.activity-dot {
width: 0.375rem; height: 0.375rem;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 6px var(--gold-glow);
margin-top: 0.375rem;
flex-shrink: 0;
justify-self: center;
}
.activity-body { font-size: var(--fs-body-sm); color: var(--text); line-height: 1.4; }
.activity-body strong { color: var(--text); font-weight: 600; }
.activity-time {
font-family: var(--font-mono);
font-size: var(--fs-tiny);
color: var(--text-3);
align-self: center;
white-space: nowrap;
letter-spacing: var(--ls-wide);
}
/* ═══════════════════════════════════════════════════════════════════════════
CANDIDATES LIST — Part 6
═══════════════════════════════════════════════════════════════════════════ */
.candidate-row {
display: grid;
grid-template-columns: 2.5rem 1fr auto auto;
gap: var(--sp-4);
align-items: center;
padding: var(--sp-4) var(--sp-6);
border-bottom: 1px solid var(--hair);
transition: background var(--dur) var(--ease);
cursor: pointer;
}
.candidate-row:hover { background: var(--bg-elev); }
.candidate-row:last-child { border-bottom: 0; }
.candidate-row-avatar {
width: 2.25rem; height: 2.25rem;
border-radius: 50%;
background:
linear-gradient(135deg,
var(--bg-elev-high) 0%,
var(--bg-elev) 100%);
border: 1px solid var(--hair-strong);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: var(--fs-tiny);
font-weight: 600;
color: var(--text-2);
flex-shrink: 0;
letter-spacing: var(--ls-wide);
}
.candidate-row-info { min-width: 0; }
.candidate-row-name {
font-size: var(--fs-body);
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.candidate-row-role {
font-size: var(--fs-body-sm);
color: var(--text-3);
margin-top: 0.125rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.candidate-row-activity {
font-family: var(--font-mono);
font-size: var(--fs-mono);
color: var(--text-3);
letter-spacing: var(--ls-wide);
white-space: nowrap;
text-align: right;
}
.candidate-row-open {
color: var(--text-3);
font-size: var(--fs-caption);
padding: var(--sp-2) var(--sp-3);
border-radius: var(--r);
transition: all var(--dur) var(--ease);
text-decoration: none;
border: 1px solid transparent;
}
.candidate-row:hover .candidate-row-open {
color: var(--gold);
border-color: var(--gold-border);
background: var(--gold-fill);
}
/* ═══════════════════════════════════════════════════════════════════════════
CANDIDATE DETAIL — Part 7
═══════════════════════════════════════════════════════════════════════════ */
/* Sticky candidate header */
.cand-sticky-header {
position: sticky;
top: 0;
z-index: 50;
background:
linear-gradient(180deg,
var(--bg) 0%,
rgba(20, 17, 15, 0.95) 80%,
rgba(20, 17, 15, 0.7) 100%);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: var(--sp-4) 0;
border-bottom: 1px solid var(--hair);
margin-bottom: var(--sp-8);
display: flex;
align-items: center;
gap: var(--sp-4);
}
.csh-avatar {
width: 2.75rem; height: 2.75rem;
border-radius: 50%;
background:
linear-gradient(135deg,
var(--bg-elev-high) 0%,
var(--bg-elev) 100%);
border: 1px solid var(--hair-strong);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: var(--fs-caption);
font-weight: 600;
color: var(--text-2);
flex-shrink: 0;
letter-spacing: var(--ls-wide);
}
.csh-name {
font-family: var(--font-display);
font-size: var(--fs-h1);
font-weight: 500;
letter-spacing: var(--ls-tight);
color: var(--text);
line-height: 1.1;
}
.csh-role { font-size: var(--fs-body-sm); color: var(--text-3); margin-top: 0.125rem; }
.csh-actions { margin-left: auto; display: flex; gap: var(--sp-3); }
/* Pattern Read — editorial hero */
.pattern-read { margin: var(--sp-12) 0; }
.pattern-read-eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-mono);
letter-spacing: var(--ls-widest);
color: var(--gold);
text-shadow: 0 0 12px var(--gold-glow);
text-align: center;
text-transform: uppercase;
margin-bottom: var(--sp-4);
}
.pattern-read-title {
font-family: var(--font-display);
font-size: var(--fs-display-xl);
font-weight: 400;
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
text-align: center;
color: var(--text);
margin: 0 0 var(--sp-6);
}
.pattern-read-byline {
font-family: var(--font-mono);
font-size: var(--fs-mono);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--text-3);
text-align: center;
margin-bottom: var(--sp-10);
}
.pattern-read-body {
font-family: var(--font-editorial);
font-size: var(--fs-h2);
line-height: 1.75;
color: var(--text);
max-width: 35rem;
margin: 0 auto;
}
.pattern-read-body p { margin-bottom: 1.3em; }
/* Devil's Advocate */
.devils-advocate {
margin: var(--sp-12) 0;
padding: var(--sp-8);
border-left: 3px solid var(--brick);
background:
linear-gradient(90deg,
var(--brick-fill) 0%,
transparent 100%);
border-radius: 0 var(--r) var(--r) 0;
}
.devils-advocate-eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-mono);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--brick);
margin-bottom: var(--sp-2);
}
.devils-advocate-title {
font-family: var(--font-display);
font-size: var(--fs-display);
font-weight: 500;
color: var(--text);
margin: 0 0 var(--sp-6);
letter-spacing: var(--ls-tight);
}
.devils-advocate-concerns { display: flex; flex-direction: column; gap: var(--sp-5); counter-reset: da; }
.devils-advocate-concern {
font-family: var(--font-editorial);
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
color: var(--text);
counter-increment: da;
padding-left: var(--sp-6);
position: relative;
}
.devils-advocate-concern::before {
content: counter(da);
position: absolute;
left: 0;
top: 0.1875rem;
font-family: var(--font-mono);
font-size: var(--fs-tiny);
color: var(--brick);
letter-spacing: var(--ls-wide);
font-weight: 600;
}
/* HPF Profile card */
.hpf-card { margin: var(--sp-10) 0; }
.hpf-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: var(--sp-6);
}
.hpf-dimensions-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-4);
}
.hpf-dimension {
padding: var(--sp-4);
background: var(--bg);
border: 1px solid var(--hair);
border-radius: var(--r);
}
.hpf-dimension-name {
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: 600;
color: var(--text);
margin-bottom: var(--sp-1);
letter-spacing: var(--ls-tight);
}
.hpf-score {
font-family: var(--font-mono);
font-size: var(--fs-display);
font-weight: 500;
color: var(--gold);
line-height: 1;
margin: var(--sp-2) 0;
}
.hpf-score::after {
content: '/10';
font-size: var(--fs-body-sm);
color: var(--text-3);
font-weight: 400;
margin-left: 0.25rem;
}
.hpf-narrative {
font-family: var(--font-editorial);
font-size: var(--fs-body-sm);
line-height: 1.6;
color: var(--text-2);
}
/* ═══════════════════════════════════════════════════════════════════════════
INTERVIEW LIST + DETAIL — Part 8
═══════════════════════════════════════════════════════════════════════════ */
.interview-row {
display: grid;
grid-template-columns: 6.25rem 1fr auto auto;
gap: var(--sp-5);
align-items: center;
padding: var(--sp-4) var(--sp-6);
border-bottom: 1px solid var(--hair);
transition: background var(--dur) var(--ease);
text-decoration: none;
color: inherit;
}
.interview-row:hover { background: var(--bg-elev); }
.interview-row:last-child { border-bottom: 0; }
.interview-row-avatar {
width: 2rem; height: 2rem;
border-radius: 50%;
background: var(--bg-elev);
border: 1px solid var(--hair-strong);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: var(--fs-tiny);
font-weight: 600;
color: var(--text-3);
letter-spacing: var(--ls-wide);
}
.interview-row-name { font-size: var(--fs-body); font-weight: 600; color: var(--text); }
.interview-row-role { font-size: var(--fs-body-sm); color: var(--text-3); margin-top: 0.125rem; }
.interview-row-time {
font-family: var(--font-mono);
font-size: var(--fs-mono);
color: var(--text-3);
letter-spacing: var(--ls-wide);
white-space: nowrap;
}
/* ═══════════════════════════════════════════════════════════════════════════
COMPARE PAGE — Part 9
═══════════════════════════════════════════════════════════════════════════ */
.compare-row {
display: grid;
gap: var(--sp-4);
padding: var(--sp-5);
border-bottom: 1px solid var(--hair);
align-items: start;
}
.compare-row:last-child { border-bottom: 0; }
.compare-row-label {
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: 500;
color: var(--text);
letter-spacing: var(--ls-tight);
}
.compare-row-meta {
font-family: var(--font-mono);
font-size: var(--fs-mono);
color: var(--text-3);
letter-spacing: var(--ls-wide);
margin-top: var(--sp-1);
}
.compare-cell {
text-align: center;
padding: var(--sp-3);
border-radius: var(--r);
}
.compare-cell-score {
font-family: var(--font-display);
font-size: var(--fs-display);
font-weight: 500;
color: var(--text);
line-height: 1;
}
.compare-cell.winner {
background: var(--gold-fill);
box-shadow: inset 0 0 0 1px var(--gold-border);
}
.compare-cell.winner .compare-cell-score {
color: var(--gold);
text-shadow: 0 0 16px var(--gold-glow);
}
/* ─── Part 10-11: Settings + Org Insights ──────────────────────────────── */
.settings-content .page-head {
margin-bottom: 1rem;
padding-bottom: 0.875rem;
border-bottom: 1px solid var(--hair);
}
.insights-section-head {
margin-bottom: 1rem;
}
.insights-section-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--text);
margin-bottom: 0.25rem;
}
.insights-section-sub {
font-size: var(--fs-caption);
color: var(--text-3);
}
.insights-headline {
background: var(--gold-fill);
border: 1px solid var(--gold-border);
border-radius: var(--r);
padding: 1rem 1.25rem;
margin-bottom: 1rem;
}
.insights-headline-label {
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 0.375rem;
}
.insights-headline-text {
font-family: var(--font-display);
font-size: var(--fs-h1);
font-weight: 500;
color: var(--text);
}
/* ─── Part 16: Skeleton + empty state helpers ───────────────────────────── */
.skeleton-list {
padding: 0.25rem 0;
}
/* ─── Part 15: Motion + focus + hover transitions ───────────────────────── */
/* Global focus ring — gold, not browser-default blue */
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
border-radius: inherit;
}
:focus:not(:focus-visible) { outline: none; }
/* Skip-to-main link — invisible until focused, appears at top-left */
.skip-link {
position: absolute;
top: -3rem;
left: 0;
z-index: 10000;
background: var(--gold);
color: var(--text-inverse);
padding: 0.5rem 1.125rem;
font-weight: 600;
font-size: var(--fs-body-sm);
text-decoration: none;
border-radius: 0 0 6px 0;
transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }
/* Interactive rows get smooth hover transitions */
.candidate-row,
.interview-row,
.compare-row,
.activity-feed-item,
.nav-item {
transition: background var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
/* Card elevation on hover */
.card:not(.no-hover):hover,
.card-elev:not(.no-hover):hover {
box-shadow: 0 4px 20px rgba(0,0,0,0.35), 0 0 0 1px var(--hair);
transition: box-shadow var(--dur-fast) var(--ease-out);
}
/* Button press feedback */
.btn:not(:disabled):active {
transform: translateY(1px) scale(0.99);
transition: transform 80ms ease;
}
/* Smooth opacity on disabled states */
[disabled], .disabled {
transition: opacity var(--dur-fast) var(--ease-out);
}
/* ═══════════════════════════════════════════════════════════════════════
RESPONSIVE — PART 5 additions
900px: icon-rail sidebar (labels hidden, icons remain)
600px: typography scale + 2x2 stat grids + touch targets
═══════════════════════════════════════════════════════════════════════ */
/* Icon-rail: between 721px and 900px the sidebar auto-collapses to icons.
Reuses the existing .sidebar-collapsed rules so no JS toggle needed. */
@media (min-width: 721px) and (max-width: 900px) {
.shell { --sidebar-w: 3.25rem; }
.nav-label,
.brand-name,
.nav-section-label,
.user-info,
.signout-link { display: none !important; }
.sidebar { padding: var(--sp-4) 0; overflow-x: hidden; }
.brand { justify-content: center; padding: 0 0 var(--sp-4); }
.nav-item {
justify-content: center;
padding: 0.5rem 0;
margin: 0;
border-radius: 0;
}
.nav-item.active::before { display: none; }
.sidebar-toggle-btn { display: none; }
.user-chip { justify-content: center; padding: 0.375rem 0; }
.nav-bottom { display: flex; flex-direction: column; align-items: center; }
}
/* ─────────────────────────────────────────────────────────────────────────
Print — candidate.html and interview.html
Hides chrome; renders narrative content on white with dark text.
Activate: Cmd+P / File > Print from candidate or interview detail page.
───────────────────────────────────────────────────────────────────────── */
@media print {
/* Reset to paper */
*, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
body { background: #fff !important; color: #111 !important; font-size: 11pt; }
/* Hide chrome */
.sidebar,
.skip-link,
.sidebar-toggle-btn,
.tutorial-tabs-strip,
#tutorial-popup-overlay,
#jedah-verify-banner,
#upgrade-required-modal,
.btn,
.page-head-actions,
.cand-actions,
.refs-actions,
.share-token-section,
.section-actions,
[data-close-modal],
[id$="-modal"]:not([aria-hidden="false"]) { display: none !important; }
/* Full-width layout — no sidebar column */
.shell { display: block !important; }
.content { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }
/* Section cards: clean borders, avoid mid-section page breaks */
.section-card,
.card { border: 1px solid #ddd !important; background: #fff !important;
break-inside: avoid; margin-bottom: 16pt; padding: 12pt; }
/* Typography */
h1, h2, h3, .page-head-title, .cand-name { color: #111 !important; }
a { color: #111 !important; text-decoration: none !important; }
/* Candidate header */
.cand-header { border-bottom: 1pt solid #ddd !important; padding-bottom: 8pt !important; }
/* Don't break inside analysis narrative blocks */
.pattern-read-text,
.hpf-dimension,
.person-dimension { break-inside: avoid; }
/* Score badges readable on paper */
.score-badge,
.dimension-score { background: #f5f5f5 !important; color: #111 !important;
border: 1px solid #ccc !important; }
/* Interview transcript readable */
.transcript-chunk { border-left: 2pt solid #888 !important; padding-left: 8pt; break-inside: avoid; }
/* Page numbers via CSS (supported in Chrome) */
@page { margin: 1.5cm; size: A4 portrait; }
.content > *:first-child { margin-top: 0; }
}
/* Narrow: page-head title scaling and 2x2 stat grids */
@media (max-width: 600px) {
.page-head-title { font-size: 1.75rem !important; line-height: 1.1; }
.hero-title { font-size: var(--fs-display-lg) !important; }
/* Stats stay 2x2 — more scannable than a single column at 375px. */
.stats-row {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.5rem !important;
}
/* Candidate header compact */
.cand-header { min-height: 3.5rem; padding: 0.5rem 0.75rem; }
.cand-header .cand-name { font-size: 1rem !important; }
/* Rubric grid horizontal scroll */
.rubric-grid-wrap,
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* ============================================================
Score edit affordance -- editorial redesign
============================================================ */
/* Pencil button */
.score-edit-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: rgba(255,255,255,0.35);
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
flex-shrink: 0;
line-height: 1;
}
.score-edit-btn:hover {
color: var(--gold);
background: rgba(212,168,100,0.06);
border-color: rgba(212,168,100,0.20);
}
.score-edit-btn:focus-visible {
outline: none;
color: var(--gold);
background: rgba(212,168,100,0.10);
border-color: rgba(212,168,100,0.50);
box-shadow: 0 0 0 3px rgba(212,168,100,0.15);
}
.score-edit-btn:active { transform: scale(0.92); }
@media (hover: none) and (pointer: coarse) {
.score-edit-btn { width: 2.75rem; height: 2.75rem; }
}
/* Score-as-trigger (replaces pencil button) */
.score-trigger {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
gap: 0.125rem;
padding: 0.375rem 0.5rem;
margin: -0.375rem -0.5rem;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
text-align: right;
}
button.score-trigger {
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
button.score-trigger:hover {
background: rgba(212, 168, 100, 0.06);
border-color: rgba(212, 168, 100, 0.25);
}
button.score-trigger:focus-visible {
outline: none;
background: rgba(212, 168, 100, 0.10);
border-color: rgba(212, 168, 100, 0.55);
box-shadow: 0 0 0 3px rgba(212, 168, 100, 0.15);
}
button.score-trigger[aria-expanded="true"] {
background: rgba(212, 168, 100, 0.12);
border-color: rgba(212, 168, 100, 0.55);
}
.score-trigger-value {
font-family: 'Fraunces', 'Georgia', serif;
font-size: 2rem;
font-weight: 500;
line-height: 1;
color: var(--text, var(--text));
}
.score-trigger-out-of {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.625rem;
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.40);
margin-left: 0.1875rem;
}
.score-trigger-dash {
font-family: 'IBM Plex Mono', monospace;
font-size: 1.5rem;
color: rgba(255, 255, 255, 0.25);
}
/* Explicit "Not enough data" state for no-evidence dimensions (HPF,
person/company dimensions). Deliberately quiet + dashed so it reads as
"not assessed yet" — clearly distinct from a genuine low or midpoint score. */
.dim-nodata-badge {
display: inline-block;
padding: 0.1875rem 0.5625rem;
border: 1px dashed var(--hairline-strong);
border-radius: var(--r-pill);
font-family: 'IBM Plex Mono', monospace;
font-size: var(--fs-tiny);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-4);
white-space: nowrap;
cursor: help;
}
/* Deep-analysis fit score trigger — larger number to match existing .deep-score-num */
.deep-score-trigger-value {
font-family: inherit;
font-size: var(--fs-display-2xl);
font-weight: 600;
letter-spacing: -1.6px;
line-height: 1;
color: var(--text);
}
/* Score layout stacks */
.dim-score-stack {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.25rem;
}
.dim-score-row {
display: flex;
align-items: center;
gap: 0.25rem;
}
.dim-score-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.375rem;
justify-content: flex-end;
}
/* HPF card grid: dim-score-stack takes the old hpf-score grid position.
It used to span rows 1-2 to sit alongside the trait name AND the
company-analog sub-label under it; the sub-label is gone, so it is a
single-row cell again. */
.hpf-card .dim-score-stack {
grid-column: 2;
grid-row: 1;
align-self: start;
justify-self: end;
}
/* History pill */
.score-history-pill {
display: inline-flex;
align-items: center;
gap: 0.1875rem;
padding: 0.125rem 0.4375rem 0.125rem 0.3125rem;
border: 1px solid rgba(212,168,100,0.25);
border-radius: 20px;
background: rgba(212,168,100,0.06);
color: var(--gold);
font-size: 0.625rem;
font-family: var(--font-mono, monospace);
font-weight: 500;
letter-spacing: 0.02em;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
line-height: 1;
}
.score-history-pill:hover {
background: rgba(212,168,100,0.12);
border-color: rgba(212,168,100,0.45);
}
.score-history-pill:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(212,168,100,0.20);
}
.score-history-count { font-variant-numeric: tabular-nums; }
/* Was caption */
.score-was-caption {
display: inline-flex;
align-items: baseline;
gap: 0.1875rem;
font-size: 0.625rem;
color: rgba(255,255,255,0.38);
font-style: italic;
font-family: "Source Serif 4", Georgia, serif;
}
.score-was-label { font-weight: 400; }
.score-was-value {
font-style: normal;
font-family: var(--font-mono, monospace);
font-size: 0.625rem;
color: rgba(255,255,255,0.50);
}
.score-was-source { font-weight: 400; }
/* Compact popover edit dialog (score-as-trigger pattern) */
.hpf-edit-popover {
position: absolute;
top: 100%;
margin-top: 0.5rem;
width: 18.75rem;
z-index: 50;
background: var(--bg-3); /* was a hardcoded dark literal: unreadable on the light palettes */
border: 1px solid rgba(212, 168, 100, 0.30);
border-radius: 12px;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
backdrop-filter: blur(16px);
padding: 1rem 1.125rem;
animation: hpfPopoverIn 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hpf-edit-popover--right { right: 0; }
.hpf-edit-popover--left { left: 0; }
@keyframes hpfPopoverIn {
from { opacity: 0; transform: translateY(-6px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.hpf-edit-popover-header {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.875rem;
padding-bottom: 0.625rem;
border-bottom: 1px solid rgba(212, 168, 100, 0.18);
}
.hpf-edit-popover-eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.5625rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
}
.hpf-edit-popover-trait {
font-family: 'Fraunces', 'Georgia', serif;
font-size: 1rem;
font-weight: 500;
color: var(--text);
}
.hpf-edit-popover-field-label {
display: block;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.5625rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin: 0.75rem 0 0.375rem;
}
.hpf-edit-popover-score {
width: 5rem;
height: 2.5rem;
padding: 0 0.75rem;
border: 1px solid var(--hairline-strong);
border-radius: 8px;
background: rgba(0, 0, 0, 0.30);
color: var(--text);
font-family: 'Fraunces', 'Georgia', serif;
font-size: 1.125rem;
font-weight: 500;
text-align: center;
-webkit-appearance: none;
-moz-appearance: textfield;
}
.hpf-edit-popover-score::-webkit-inner-spin-button,
.hpf-edit-popover-score::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.hpf-edit-popover-score:focus {
outline: none;
border-color: rgba(212, 168, 100, 0.55);
box-shadow: 0 0 0 3px rgba(212, 168, 100, 0.12);
}
.hpf-edit-popover-reason {
width: 100%;
min-height: 4rem;
padding: 0.5rem 0.625rem;
border: 1px solid var(--hairline-strong);
border-radius: 8px;
background: rgba(0, 0, 0, 0.30);
color: var(--text);
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.8125rem;
line-height: 1.5;
resize: vertical;
}
.hpf-edit-popover-reason::placeholder {
color: rgba(255, 255, 255, 0.30);
font-style: italic;
}
.hpf-edit-popover-reason:focus {
outline: none;
border-color: rgba(212, 168, 100, 0.55);
box-shadow: 0 0 0 3px rgba(212, 168, 100, 0.10);
}
.hpf-edit-popover-counter {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.5625rem;
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.35);
margin-top: 0.25rem;
text-align: right;
}
.hpf-edit-popover-error {
margin-top: 0.5rem;
padding: 0.4375rem 0.625rem;
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.25);
border-radius: 6px;
}
.hpf-edit-popover-error[hidden] { display: none; }
.hpf-edit-popover-error-text { font-size: 0.6875rem; color: var(--c-danger-text); line-height: 1.4; }
.hpf-edit-popover-actions {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
margin-top: 0.875rem;
padding-top: 0.75rem;
border-top: 1px solid rgba(212, 168, 100, 0.12);
}
.hpf-edit-popover-cancel,
.hpf-edit-popover-save {
height: 2rem;
padding: 0 0.875rem;
border-radius: 7px;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.12s ease;
}
.hpf-edit-popover-cancel {
background: transparent;
color: rgba(255, 255, 255, 0.65);
border: 1px solid var(--hairline-strong);
}
.hpf-edit-popover-cancel:hover {
background: rgba(255, 255, 255, 0.04);
color: var(--text);
border-color: rgba(255, 255, 255, 0.25);
}
.hpf-edit-popover-save {
background: var(--gold);
color: var(--text-inverse);
border: 1px solid var(--gold);
}
.hpf-edit-popover-save:disabled {
background: rgba(212, 168, 100, 0.18);
color: rgba(10, 9, 8, 0.55);
border-color: rgba(212, 168, 100, 0.18);
cursor: not-allowed;
}
.hpf-edit-popover-save:hover:not(:disabled) {
background: var(--gold-bright);
border-color: var(--gold-bright);
}
@media (prefers-reduced-motion: reduce) {
.hpf-edit-popover { animation: none; }
}
/* Score editor dialog */
.score-editor {
margin-top: 0.625rem;
padding: 1rem;
background: var(--bg-2);
border: 1px solid rgba(212,168,100,0.22);
border-radius: 10px;
box-shadow: 0 8px 32px rgba(0,0,0,0.45);
animation: scoreEditorIn 0.22s cubic-bezier(0.16,1,0.3,1) both;
}
.score-editor.score-editor-exit {
animation: scoreEditorOut 0.18s cubic-bezier(0.16,1,0.3,1) both;
}
.score-editor-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 0.875rem;
}
.score-editor-eyebrow {
font-size: 0.5625rem;
font-family: var(--font-mono, monospace);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 0.1875rem;
}
.score-editor-trait {
font-family: "Fraunces", Georgia, serif;
font-size: 0.9375rem;
font-weight: 500;
color: var(--text);
line-height: 1.25;
}
.score-editor-fields { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.875rem; }
.score-editor-field { display: flex; flex-direction: column; gap: 0.3125rem; }
.score-editor-label {
font-size: 0.625rem;
font-family: var(--font-mono, monospace);
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,0.50);
}
/* Stepper */
.score-stepper { display: flex; align-items: center; gap: 0; width: fit-content; }
.score-stepper-btn {
display: flex;
align-items: center;
justify-content: center;
width: 1.875rem;
height: 2.125rem;
border: 1px solid rgba(212,168,100,0.30);
background: rgba(212,168,100,0.04);
color: var(--gold);
font-size: 1rem;
font-weight: 300;
cursor: pointer;
transition: background 0.12s ease;
user-select: none;
}
.score-stepper-btn:first-child { border-radius: 6px 0 0 6px; }
.score-stepper-btn:last-child { border-radius: 0 6px 6px 0; }
.score-stepper-btn:hover:not(:disabled) { background: rgba(212,168,100,0.12); }
.score-stepper-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.score-stepper-input {
width: 2.75rem;
height: 2.125rem;
border-top: 1px solid rgba(212,168,100,0.30);
border-bottom: 1px solid rgba(212,168,100,0.30);
border-left: none;
border-right: none;
background: rgba(212,168,100,0.04);
color: var(--text);
font-family: var(--font-mono, monospace);
font-size: 0.9375rem;
font-weight: 600;
text-align: center;
-webkit-appearance: none;
-moz-appearance: textfield;
}
.score-stepper-input::-webkit-inner-spin-button,
.score-stepper-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.score-stepper-input:focus { outline: none; background: rgba(212,168,100,0.08); }
.score-editor-hint {
font-size: 0.625rem;
font-family: var(--font-mono, monospace);
color: rgba(255,255,255,0.30);
margin-left: 0.5rem;
align-self: center;
}
/* Reason textarea */
.score-editor-reason {
width: 100%;
box-sizing: border-box;
padding: 0.5rem 0.625rem;
background: rgba(255,255,255,0.04);
border: 1px solid var(--hair-2);
border-radius: 6px;
color: var(--text);
font-family: "IBM Plex Sans", sans-serif;
font-size: 0.75rem;
line-height: 1.5;
resize: vertical;
transition: border-color 0.15s ease;
}
.score-editor-reason:focus {
outline: none;
border-color: rgba(212,168,100,0.40);
background: rgba(255,255,255,0.06);
}
.score-editor-reason-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.625rem;
font-family: var(--font-mono, monospace);
color: rgba(255,255,255,0.30);
}
.score-editor-counter.near-limit { color: var(--gold); }
.score-editor-counter.over-limit { color: var(--brick); }
.score-editor-min-hint { color: rgba(255,255,255,0.28); }
.score-editor-min-hint.satisfied { color: rgba(100,200,120,0.75); }
/* Error state */
.score-editor-error {
display: flex;
align-items: flex-start;
gap: 0.375rem;
padding: 0.5rem 0.625rem;
background: rgba(239,68,68,0.08);
border: 1px solid rgba(239,68,68,0.25);
border-radius: 6px;
margin-bottom: 0.75rem;
}
.score-editor-error[hidden] { display: none; }
.score-editor-error-glyph {
font-size: 0.6875rem;
font-weight: 700;
color: var(--c-danger-text);
flex-shrink: 0;
margin-top: 0.0625rem;
}
.score-editor-error-text { font-size: 0.6875rem; color: var(--c-danger-text); line-height: 1.4; }
/* Actions */
.score-editor-actions { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.875rem; }
.score-editor-cancel {
padding: 0.375rem 0.875rem;
border: 1px solid var(--hair-2);
border-radius: 6px;
background: transparent;
color: rgba(255,255,255,0.55);
font-size: 0.75rem;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease;
}
.score-editor-cancel:hover { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.80); }
.score-editor-save {
padding: 0.375rem 1rem;
border: none;
border-radius: 6px;
background: var(--gold);
color: var(--text-inverse);
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: opacity 0.15s ease, background 0.15s ease;
}
.score-editor-save:disabled { opacity: 0.40; cursor: not-allowed; }
.score-editor-save:not(:disabled):hover { background: var(--gold-bright); }
/* History popover */
.score-history-popover {
position: fixed;
z-index: 9999;
background: var(--bg-2);
border: 1px solid rgba(212,168,100,0.22);
border-radius: 10px;
box-shadow: 0 8px 32px rgba(0,0,0,0.55);
padding: 0.875rem 1rem;
min-width: 15rem;
max-width: 21.25rem;
animation: historyPopoverIn 0.20s cubic-bezier(0.16,1,0.3,1) both;
}
.score-hist-popover-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
}
.score-hist-popover-title {
font-family: "Fraunces", Georgia, serif;
font-size: 0.8125rem;
font-weight: 500;
color: var(--text);
}
.score-hist-popover-close {
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: rgba(255,255,255,0.40);
font-size: 1rem;
cursor: pointer;
border-radius: 4px;
line-height: 1;
}
.score-hist-popover-close:hover { color: rgba(255,255,255,0.80); background: rgba(255,255,255,0.06); }
.score-hist-entries { display: flex; flex-direction: column; gap: 0.5rem; }
.history-entry {
padding: 0.5625rem 0.625rem;
background: rgba(255,255,255,0.03);
border: 1px solid var(--hair);
border-radius: 6px;
}
.history-entry-ai { border-color: rgba(212,168,100,0.15); background: rgba(212,168,100,0.04); }
.history-entry-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.25rem;
}
.history-entry-time {
font-size: 0.5625rem;
font-family: var(--font-mono, monospace);
color: rgba(255,255,255,0.35);
letter-spacing: 0.02em;
}
.history-entry-badge {
font-size: 0.5625rem;
font-family: var(--font-mono, monospace);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(212,168,100,0.70);
padding: 0.0625rem 0.3125rem;
border: 1px solid rgba(212,168,100,0.25);
border-radius: 3px;
}
.history-entry-delta {
display: flex;
align-items: center;
gap: 0.375rem;
margin-bottom: 0.3125rem;
}
.history-entry-score {
font-family: var(--font-mono, monospace);
font-size: 0.875rem;
font-weight: 600;
color: var(--text);
}
.history-entry-arrow { color: rgba(255,255,255,0.30); font-size: 0.75rem; }
.history-entry-reason {
font-size: 0.6875rem;
color: rgba(255,255,255,0.55);
font-style: italic;
font-family: "Source Serif 4", Georgia, serif;
line-height: 1.45;
}
.history-entry-reason::before { content: '"'; }
.history-entry-reason::after { content: '"'; }
/* Animations */
@keyframes scoreEditorIn {
from { opacity: 0; transform: translateY(-8px) scale(0.985); }
to { opacity: 1; transform: none; }
}
@keyframes scoreEditorOut {
from { opacity: 1; transform: none; }
to { opacity: 0; transform: translateY(-8px) scale(0.985); }
}
@keyframes historyPopoverIn {
from { opacity: 0; transform: translateY(-6px) scale(0.98); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.score-editor,
.score-editor.score-editor-exit,
.score-history-popover {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* Mobile stepper touch targets */
@media (max-width: 480px) {
.score-stepper-btn { width: 2.25rem; height: 2.375rem; }
.score-stepper-input { width: 3rem; height: 2.375rem; }
}
/* ─── SCORE-BAND COLORING — consistent /10 bands app-wide ────────────────────
Below 5 = amber (warning), 5 to 7.9 = neutral gold, 8+ = sage green.
Classes come from jedahScoreBand() in app.js. --band-color feeds bar fills
and inline styles so bars and numbers share one hue. Kept at the end of
this sheet so the color wins ties against earlier single-class rules. */
.score-band-low { --band-color: var(--amber); color: var(--amber); }
.score-band-mid { --band-color: var(--gold); color: var(--gold); }
.score-band-high { --band-color: var(--sage-bright); color: var(--sage-bright); }
/* Rubric bar fills tinted by band (live rubric + interview history bars) */
.rubric-fill.score-band-low,
.rubric-fill.score-band-mid,
.rubric-fill.score-band-high { background: var(--band-color); }
/* Dimension score chips (Person / Company Dimensions) keep their pill fill */
.pd-dim-score.score-band-low { background: var(--amber-fill); }
.pd-dim-score.score-band-mid { background: var(--gold-fill); }
.pd-dim-score.score-band-high { background: var(--sage-fill); }
/* ─── Recent roles sidebar (recent-roles.js) ──────────────────────
Additive text list next to the career-viz SVG on candidate.html
(two-column via .crl-wrap grid) and stacked below the chart in
the Zoom panel. crl- prefix to avoid collisions. */
.crl-wrap { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
@media (min-width: 900px) { .crl-wrap { grid-template-columns: minmax(0, 1fr) 16.25rem; } }
.crl-panel { min-width: 0; }
.crl-heading { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3, rgba(255,255,255,0.55)); font-weight: 500; margin: 0 0 0.5rem; }
.crl-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.crl-item { padding: 0.5rem 0.625rem; border-radius: 6px; background: var(--hair); border: 1px solid var(--hair); }
.crl-item.crl-current { border-left: 2px solid var(--gold, var(--gold)); background: rgba(212,168,100,0.04); }
.crl-title { font-size: 0.8125rem; font-weight: 600; color: var(--text-1, #F5F2EB); line-height: 1.35; }
.crl-company { font-size: 0.75rem; color: var(--text-2, rgba(255,255,255,0.7)); line-height: 1.4; margin-top: 0.0625rem; }
.crl-dates { font-size: 0.6875rem; color: var(--text-3, rgba(255,255,255,0.5)); margin-top: 0.1875rem; font-variant-numeric: tabular-nums; }
.crl-show-all { margin-top: 0.625rem; background: none; border: 1px dashed var(--hairline-strong); color: var(--text-3, rgba(255,255,255,0.55)); font: inherit; font-size: 0.6875rem; padding: 0.375rem 0.625rem; border-radius: 6px; cursor: pointer; width: 100%; }
.crl-show-all:hover { color: var(--text-1, #F5F2EB); border-color: rgba(255,255,255,0.28); }
.crl-show-all:focus-visible { outline: 2px solid var(--gold, var(--gold)); outline-offset: 2px; }
/* ═══════════════════════════════════════════════════════════════════════════
REDESIGN 2026-07 — "Graphite & Ember" FINAL LAYER
Modern premium dark pass. This layer is deliberately LAST so it wins the
cascade against every historical override above (several of which carry
!important). It restyles only shared components — no selectors that JS
depends on are renamed. Rollback: delete this block + revert
design-tokens.css.
═══════════════════════════════════════════════════════════════════════════ */
/* ─── Cards / panels — layered surface, soft radius, quiet elevation ─── */
.card, .stat-card, .setup-card, .chart-wrap, .pattern-read {
background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%) !important;
border: 1px solid var(--hair-2) !important;
border-radius: var(--r-md) !important;
box-shadow: var(--shadow-sm) !important;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease) !important;
}
.card:hover { border-color: var(--hair-strong) !important; }
.stat-card { padding: 1.25rem 1.375rem; }
/* ─── Buttons ─── */
.btn, .btn-primary, .btn-ghost, .btn-secondary, .btn-danger {
border-radius: var(--r) !important;
font-weight: 500 !important;
letter-spacing: 0.01em !important;
transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease) !important;
}
.btn-primary {
background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%) !important;
color: var(--text-inverse) !important;
border: 1px solid var(--gold) !important;
font-weight: 600 !important;
box-shadow: 0 1px 0 0 rgba(255,255,255,0.22) inset, 0 2px 8px rgba(0,0,0,0.4) !important;
}
.btn-primary:hover {
background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold-bright) 100%) !important;
border-color: var(--gold-bright) !important;
color: var(--text-inverse) !important;
box-shadow: 0 1px 0 0 rgba(255,255,255,0.25) inset, 0 0 20px var(--gold-glow) !important;
transform: translateY(-1px);
}
.btn-ghost, .btn-secondary {
background: rgba(245,242,235,0.03) !important;
color: var(--text-2) !important;
border: 1px solid var(--hair-2) !important;
}
.btn-ghost:hover, .btn-secondary:hover {
color: var(--text) !important;
border-color: var(--hair-strong) !important;
background: rgba(245,242,235,0.06) !important;
}
.btn-danger {
background: var(--brick-fill) !important;
color: var(--c-danger-text) !important;
border: 1px solid rgba(198,107,92,0.35) !important;
}
.btn-danger:hover { background: rgba(198,107,92,0.18) !important; color: #E8978A !important; }
.btn:focus-visible, button:focus-visible {
outline: none !important;
box-shadow: var(--ring) !important;
}
/* ─── Inputs / selects / textareas ─── */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="tel"], input[type="url"], input[type="date"],
input[type="time"], input[type="datetime-local"], textarea, select {
/* Token, not a literal: this used to be rgba(10,9,8,0.55), a hardcoded
near-black that composited to grey over the light palettes (paper, bone,
porcelain, meadow, blush, mint) and made every field unreadable. Every
palette defines --bg-deep for its own light/dark character, and
.jw-input/.jw-select/.jw-textarea already use it, so this now matches
them. In the default warm-dark theme the two values are visually
identical (#0A0908 vs the old composite #0E0C0B). */
background: var(--bg-deep) !important;
border: 1px solid var(--hair-2) !important;
border-radius: var(--r) !important;
color: var(--text) !important;
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease) !important;
}
input:hover:not(:focus), textarea:hover:not(:focus), select:hover:not(:focus) {
border-color: var(--hair-strong) !important;
}
input:focus, textarea:focus, select:focus {
outline: none !important;
border-color: var(--gold-border) !important;
box-shadow: var(--ring) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-4) !important; }
/* ─── Sidebar — quiet rail, ember active state ─── */
.sidebar {
background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 85%) !important;
border-right: 1px solid var(--hair) !important;
}
.nav-item { border-radius: var(--r) !important; }
.nav-item:hover {
background: rgba(245,242,235,0.045) !important;
color: var(--text) !important;
}
.nav-item.active {
background: var(--gold-fill) !important;
color: var(--text) !important;
box-shadow: 0 0 0 1px rgba(212,168,100,0.14) inset;
}
.nav-item.active::before { background: var(--gold); box-shadow: 0 0 10px var(--gold-glow); }
.nav-item.active .nav-icon { color: var(--gold) !important; opacity: 1; }
/* ─── Tabs — ember underline ─── */
.tab.active {
color: var(--text) !important;
border-bottom-color: var(--gold) !important;
}
.tab:hover:not(.active) { color: var(--text-2); }
/* ─── Modals + dropdowns — deep glass ─── */
.modal-backdrop {
background: rgba(6, 5, 4, 0.66) !important;
backdrop-filter: blur(10px) saturate(1.1);
-webkit-backdrop-filter: blur(10px) saturate(1.1);
}
.modal {
background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%) !important;
border: 1px solid var(--hair-2) !important;
border-radius: var(--r-lg) !important;
box-shadow: var(--shadow-xl) !important;
}
.modal-title { font-family: var(--font-display); font-weight: 500; }
.dropdown-menu {
background: var(--bg-3) !important;
border: 1px solid var(--hair-2) !important;
border-radius: var(--r-md) !important;
box-shadow: var(--shadow-lg) !important;
padding: 0.375rem !important;
}
.dropdown-item { border-radius: var(--r-sm); }
/* ─── Chips / badges / status pills — pill geometry, quiet borders ─── */
.chip, .badge {
border-radius: var(--r-pill) !important;
letter-spacing: 0.04em;
}
.chip.outline { border-width: 1px !important; }
/* ─── List rows — soft hover wash ─── */
.list-row:hover, .role:hover { background: rgba(245,242,235,0.03); }
/* ─── Empty states ─── */
.empty-state, .rubric-list-empty, .jd-list-empty, .question-list-empty {
background: rgba(245,242,235,0.015) !important;
border: 1px dashed var(--hair-2) !important;
border-radius: var(--r-lg) !important;
}
/* ─── Scrollbars — thin, rounded, discreet ─── */
/* The export's values. The old rgba(245,242,235,...) literals composited to
a near-invisible bar on the light palettes; --bg-tint tracks the theme. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-tint); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-5); }
/* ─── Page titles keep the Fraunces display voice ─── */
.page-title, .page-head-title { font-family: var(--font-display); }
/* ─── Focus visibility for links/controls (a11y, ember ring) ─── */
a:focus-visible, [tabindex]:focus-visible {
outline: 2px solid var(--gold-border) !important;
outline-offset: 2px;
}
/* ═══════════════════════════════════════════════════════════════════════
V3 REDESIGN — SHARED SHELL + DASHBOARD COMPONENTS
Authoritative sidebar styling (matches app/_design/v3-reference) plus the
reusable dashboard component set. Placed last so it wins the cascade over
the earlier accreted !important sidebar blocks. Every authed page renders
the same shared sidebar partial, so these sidebar rules restyle the whole
app; the .jw-* dashboard classes are consumed by index.html now and are
available to later redesign passes.
═══════════════════════════════════════════════════════════════════════ */
/* ── Shared sidebar shell ──────────────────────────────────────────────── */
.sidebar {
background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%) !important;
border-right: 1px solid var(--hair) !important;
padding: 1.5rem 0 1.25rem !important;
gap: 0 !important;
}
.brand {
padding: 0 1.25rem 1.375rem !important;
margin-bottom: 0.5rem !important;
gap: 0.75rem !important;
border-bottom: 1px solid var(--hair) !important;
}
.brand-logo { width: 2.25rem !important; height: 2.25rem !important; }
/* The v3 wordmark is "Jedah" set in Fraunces (mixed case) — overrides the
earlier mono-uppercase treatment. Exec custom-branding (sidebar-tier.js)
still swaps this text at runtime for branded workspaces. */
.brand-name {
font-family: var(--font-display) !important;
font-size: 1.1875rem !important;
font-weight: 500 !important;
letter-spacing: -0.01em !important;
text-transform: none !important;
color: var(--text) !important;
line-height: 1.1 !important;
-webkit-line-clamp: 2 !important;
}
.nav-section-label {
font-family: var(--font-mono) !important;
font-size: 0.625rem !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--text-4) !important;
padding: 1rem 1.25rem 0.5rem !important;
margin: 0 !important;
}
.nav-item {
gap: 0.6875rem !important;
padding: 0.5rem 0.75rem !important;
margin: 0.0625rem 0.75rem !important;
border-radius: 8px !important;
font-size: 0.8125rem !important;
color: var(--text-3) !important;
font-weight: 400 !important;
}
.nav-item:hover { background: var(--bg-tint) !important; color: var(--text) !important; }
.nav-item.active {
background: var(--gold-fill) !important;
color: var(--text) !important;
font-weight: 500 !important;
box-shadow: inset 2px 0 0 var(--gold) !important;
}
.nav-item.active::before { display: none !important; }
.nav-item .nav-icon { width: 0.9375rem !important; height: 0.9375rem !important; opacity: 1 !important; color: currentColor !important; }
.nav-item.active .nav-icon, .nav-item:hover .nav-icon { color: var(--text) !important; }
.nav-bottom {
margin-top: auto !important;
padding-top: 0.75rem !important;
border-top: 1px solid var(--hair) !important;
}
.user-chip { padding: 0.75rem 1.25rem 0 !important; gap: 0.75rem !important; border-top: none !important; }
/* v3 gold-tinted avatar (matches the reference footer + candidate headers). */
.user-avatar {
background: var(--gold-fill) !important;
border: 1px solid var(--gold-border) !important;
color: var(--gold-bright) !important;
width: 1.75rem !important; height: 1.75rem !important;
font-size: 0.6875rem !important;
}
.user-info .nm { font-size: 0.8125rem !important; }
.user-info .em { font-size: 0.65625rem !important; letter-spacing: 0 !important; text-transform: none !important; }
/* ── V3 buttons (pill actions used in page headers) ────────────────────── */
.jw-btn {
height: 2rem; padding: 0 0.875rem; border-radius: var(--r-btn);
border: 1px solid var(--hairline-strong); background: transparent; color: var(--text);
font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500;
cursor: pointer; text-decoration: none;
display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.jw-btn:hover { background: var(--bg-tint); color: var(--text); }
.jw-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.jw-btn-primary {
border-color: transparent; background: var(--gold); color: var(--bg-deep); font-weight: 600;
}
.jw-btn-primary:hover { background: var(--gold-bright); color: var(--bg-deep); }
/* ── V3 page header (greeting) ─────────────────────────────────────────── */
/* Reads the shared app-column token rather than its own 80rem, so the v3/v5
pages (dashboard, candidates, schedule) widen with everything else instead
of stopping 300px short of the rest of the app. */
.jw-page { max-width: var(--content-max); margin: 0 auto; }
.jw-hero {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 1rem; flex-wrap: wrap; margin-bottom: 1.375rem;
}
.jw-hero-title {
font-family: var(--font-display); font-size: 1.875rem; font-weight: var(--display-weight);
letter-spacing: -0.02em; line-height: 1.1; color: var(--text); margin: 0;
}
.jw-hero-sub { font-size: 0.84375rem; color: var(--text-3); margin-top: 0.5rem; }
.jw-hero-actions { display: flex; gap: 0.625rem; align-items: center; }
/* ── V3 KPI strip ──────────────────────────────────────────────────────── */
.jw-kpis {
display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1px;
background: var(--hair-2); border: 1px solid var(--hair-2);
border-radius: var(--r-card); overflow: hidden; margin-bottom: 1.625rem;
}
.jw-kpi {
background: var(--bg-elev); padding: 0.875rem 1rem; text-decoration: none;
display: block; color: inherit; position: relative;
transition: background var(--dur-fast) var(--ease);
}
a.jw-kpi:hover { background: var(--surface-3); }
.jw-kpi-label {
font-family: var(--font-mono); font-size: 0.59375rem; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--text-4); margin-bottom: 0.5625rem;
}
.jw-kpi-num {
font-family: var(--font-display); font-size: 1.6875rem; font-weight: var(--display-weight);
line-height: 1; color: var(--text); font-variant-numeric: tabular-nums;
}
.jw-kpi-num small { font-size: 1.0625rem; color: var(--text-3); font-family: var(--font-body); }
.jw-kpi-sub { font-size: 0.75rem; color: var(--text-3); margin-top: 0.5625rem; }
/* ── V3 dashboard two-column grid ──────────────────────────────────────── */
.jw-main { display: grid; grid-template-columns: minmax(0, 1fr) 18.75rem; gap: 2rem; align-items: start; }
.jw-col { min-width: 0; display: flex; flex-direction: column; gap: 2rem; }
.jw-rail { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
@media (max-width: 1180px) { .jw-main { grid-template-columns: minmax(0, 1fr); } }
/* ── V3 section headers ────────────────────────────────────────────────── */
.jw-section-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.875rem; gap: 0.75rem; }
.jw-section-h h2 {
font-family: var(--font-mono) !important; font-size: 0.6875rem !important;
font-weight: 500 !important; letter-spacing: 0.18em !important;
text-transform: uppercase; color: var(--text-3); margin: 0;
}
.jw-section-h a {
font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em;
color: var(--text-3); text-decoration: none; white-space: nowrap;
}
.jw-section-h a:hover { color: var(--gold-bright); }
/* ── V3 list card + rows ───────────────────────────────────────────────── */
.jw-list {
background: var(--bg-elev); border: 1px solid var(--hair);
border-radius: var(--r-card); padding: 0.25rem; display: flex; flex-direction: column; gap: 1px;
}
.jw-row {
display: flex; align-items: center; gap: 0.6875rem; width: 100%;
padding: 0.5rem 0.6875rem; border: none; border-radius: var(--r-input); background: none;
font-family: inherit; cursor: pointer; text-align: left; color: inherit;
text-decoration: none; transition: background var(--dur-fast) var(--ease);
}
.jw-row:hover { background: var(--bg-tint); }
.jw-row-av {
width: 2.125rem; height: 2.125rem; border-radius: 999px; background: var(--bg-3);
color: var(--text-2); display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 0.71875rem; flex-shrink: 0; border: 1px solid var(--hair);
}
.jw-row-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.125rem; }
.jw-row-line { display: flex; align-items: center; gap: 0.5625rem; }
.jw-row-title { font-weight: 600; font-size: 0.84375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.jw-row-sub { font-size: 0.75rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jw-row-right { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 0.625rem; }
.jw-row-time { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-4); }
.jw-row-time.is-live { color: var(--sage-bright); }
.jw-row-empty { padding: 1.625rem 0.875rem; text-align: center; color: var(--text-4); font-size: 0.78125rem; }
/* Dashboard week-strip chips (app/index.html #dash-week). Geometry and
colour are inline on the anchor, the same way the interviews.html week
grid builds its chips; this only supplies the hover affordance, which
inline styles cannot express. !important because those inline styles set
background and border-color. */
.jw-day-chip { transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.jw-day-chip:hover { background: var(--gold-fill) !important; border-color: var(--gold) !important; }
.jw-day-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
/* Overdue chip: an interview whose time has passed and that nobody ended
(JedahInterviews.isUnresolved). Same geometry, warn/amber token instead of
gold, so hover/focus do not flip it back to "coming up". */
.jw-day-chip.is-overdue:hover { background: var(--amber-fill) !important; border-color: var(--amber) !important; }
.jw-day-chip.is-overdue:focus-visible { outline-color: var(--amber); }
/* ── V3 chips ──────────────────────────────────────────────────────────── */
.jw-chip {
padding: 0.125rem 0.5625rem; border-radius: var(--r-chip, 999px); font-size: 0.65625rem; font-weight: 600;
flex-shrink: 0; white-space: nowrap; line-height: 1.6; letter-spacing: 0.02em; display: inline-block;
}
.jw-chip-offer { background: var(--chip-offer-bg); color: var(--chip-offer-fg); }
.jw-chip-round { background: var(--chip-round-bg); color: var(--chip-round-fg); }
.jw-chip-screen { background: var(--chip-screen-bg); color: var(--chip-screen-fg); }
.jw-chip-review { background: var(--chip-review-bg); color: var(--chip-review-fg); }
.jw-chip-live { background: var(--chip-live-bg); color: var(--chip-live-fg); }
.jw-chip-out { background: var(--chip-out-bg); color: var(--chip-out-fg); }
/* Warn chip -- "this should already have happened". Existing amber tokens,
no new colour. Used by the Upcoming list on app/interviews.html for a row
JedahInterviews.isUnresolved() flags. */
.jw-chip-warn { background: var(--amber-fill); color: var(--amber-soft); }
/* ── V3 score text ─────────────────────────────────────────────────────── */
.jw-score { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.jw-score-high { color: var(--score-v3-high); }
.jw-score-mid { color: var(--score-v3-mid); }
.jw-score-low { color: var(--score-v3-low); }
.jw-score-na { color: var(--text-4); font-weight: 500; }
/* ── V3 inline "Start / Join" pill on a list row ───────────────────────── */
.jw-start {
flex-shrink: 0; height: 1.625rem; padding: 0 0.75rem; border: none; border-radius: var(--r-btn);
background: var(--gold); color: var(--bg-deep); font-family: inherit;
font-size: 0.71875rem; font-weight: 600; cursor: pointer;
display: inline-flex; align-items: center; text-decoration: none;
transition: background var(--dur-fast) var(--ease);
}
.jw-start:hover { background: var(--gold-bright); color: var(--bg-deep); }
/* ── V3 quick actions ──────────────────────────────────────────────────── */
.jw-quick {
background: var(--bg-elev); border: 1px solid var(--hair);
border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column;
}
.jw-quick a {
display: flex; align-items: center; justify-content: space-between; gap: 0.625rem;
padding: 0.625rem 0.9375rem; border-top: 1px solid var(--hair); font-size: 0.8125rem;
color: var(--text-2); text-decoration: none;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.jw-quick a:first-child { border-top: none; }
.jw-quick a:hover { background: var(--bg-tint); color: var(--text); }
.jw-quick a span { color: var(--text-4); font-size: 0.75rem; }
.jw-quick a:hover span { color: var(--gold-bright); }
/* ── V3 Jedah note card ────────────────────────────────────────────────── */
.jw-note {
border-left: 2px solid var(--gold-border); background: var(--gold-fill);
border-radius: 0 9px 9px 0; padding: 0.875rem 1.125rem;
font-size: 0.8125rem; color: var(--text-2); line-height: 1.6;
}
.jw-note p { margin: 0; }
.jw-note p + p { margin-top: 0.75em; }
/* ═══════════════════════════════════════════════════════════════════════
V4 REDESIGN — COMPONENTS PORTED FROM THE CANDIDATE MOCKS
Ported verbatim (values, not markup) from the redesign-v4 export's
styles.css for "03 Candidate Overview" / "04 Candidate Analysis". These are
ADDITIVE: every class below is new, so no page that already ships .jw-*
dashboard classes changes. Consumed by app/candidate.html and
app/candidate-shared.html.
═══════════════════════════════════════════════════════════════════════ */
/* ── Cards + layout ────────────────────────────────────────────────────── */
.jw-card { background: var(--bg-elev); border: 1px solid var(--hair); border-radius: var(--r-card); }
.jw-card-pad { padding: 1rem 1.125rem; }
.jw-section { margin-bottom: 1.625rem; }
.jw-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.jw-split-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.jw-page-wide { max-width: var(--content-wide); }
@media (max-width: 1180px) {
.jw-grid-2 { grid-template-columns: minmax(0, 1fr); }
.jw-split-main { grid-template-columns: minmax(0, 1fr); }
}
/* ── Buttons (variants on the existing .jw-btn base) ───────────────────── */
.jw-btn-sm { height: 1.625rem; padding: 0 0.75rem; font-size: 0.71875rem; }
.jw-btn-ghost { border-color: transparent; color: var(--text-2); }
.jw-btn-danger { border-color: rgba(198, 107, 92, 0.4); color: var(--brick-soft); }
.jw-btn-danger:hover { background: var(--brick-fill); }
/* ── Mono tags (SHADOW: LATENT / PRESENT, severity, verdict) ───────────── */
.jw-tag {
font-family: var(--font-mono); font-size: 0.59375rem; font-weight: 500; letter-spacing: 0.1em;
text-transform: uppercase; padding: 0.125rem 0.5rem; border-radius: 4px;
white-space: nowrap; display: inline-block;
}
.jw-tag-brick { background: var(--brick-fill); color: var(--brick-soft); border: 1px solid rgba(198, 107, 92, 0.25); }
.jw-tag-amber { background: var(--amber-fill); color: var(--amber-soft); border: 1px solid rgba(232, 149, 68, 0.22); }
.jw-tag-dim { background: var(--bg-tint); color: var(--text-3); border: 1px solid var(--hair); }
.jw-tag-gold { background: var(--gold-fill); color: var(--gold-bright); border: 1px solid var(--gold-border); }
.jw-tag-sage { background: var(--sage-fill); color: var(--sage-bright); border: 1px solid rgba(123, 166, 140, 0.25); }
/* ── Big score + dimension bars ────────────────────────────────────────── */
.jw-score-lg {
font-family: var(--font-display); font-size: 2.5rem; font-weight: var(--display-weight);
line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.jw-dims { display: flex; flex-direction: column; }
/* The name cell is a single line: the company-analog sub-label that used to
sit under it was removed (founder, Jul 2026). Row padding is a step up from
the old 0.6875rem so the list keeps its rhythm now that the tallest cell in
the name column is one line instead of two. */
.jw-dim {
display: grid; grid-template-columns: 9.375rem 1fr auto; align-items: center;
gap: 1rem; padding: var(--sp-3) 0; border-bottom: 1px solid var(--hair);
}
.jw-dim:last-child { border-bottom: none; }
.jw-dim-name { font-size: 0.84375rem; font-weight: 600; color: var(--text); }
.jw-dim-track { height: 0.25rem; border-radius: 4px; background: var(--bg-tint); position: relative; overflow: hidden; }
.jw-dim-fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--score-v3-mid); }
.jw-dim-fill.is-high { background: var(--score-v3-high); }
.jw-dim-fill.is-low { background: var(--score-v3-low); }
.jw-dim-val {
font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600;
min-width: 2.25rem; text-align: right; font-variant-numeric: tabular-nums;
}
@media (max-width: 620px) { .jw-dim { grid-template-columns: 1fr auto; } .jw-dim-track { grid-column: 1 / -1; } }
/* ── Plot legend ───────────────────────────────────────────────────────── */
.jw-plot-legend {
display: flex; flex-wrap: wrap; gap: 1.125rem; margin-top: 0.875rem;
font-size: 0.71875rem; color: var(--text-3); align-items: center;
}
.jw-plot-legend span { display: inline-flex; align-items: center; gap: 0.4375rem; }
/* ── Tabs ──────────────────────────────────────────────────────────────── */
.jw-tabs { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--hair); margin-bottom: 1.125rem; }
.jw-tab {
font-family: var(--font-mono); font-size: 0.71875rem; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--text-4); text-decoration: none; padding: 0 0.125rem 0.75rem; border: none; background: none;
border-bottom: 2px solid transparent; margin-bottom: -0.0625rem; cursor: pointer;
transition: color var(--dur-fast) var(--ease);
}
.jw-tab:hover { color: var(--text-2); }
.jw-tab.is-active, .jw-tab.active { color: var(--gold-bright); border-bottom-color: var(--gold); }
/* ── Verdict banner + signal pill ──────────────────────────────────────── */
.jw-verdict {
border: 1px solid var(--gold-border);
background: linear-gradient(180deg, rgba(212, 168, 100, 0.07), rgba(212, 168, 100, 0.02));
border-radius: var(--r-card); padding: 1.125rem 1.375rem;
}
.jw-signal {
display: flex; align-items: center; gap: 0.625rem;
border: 1px solid rgba(123, 166, 140, 0.25); background: var(--sage-fill);
border-radius: 9px; padding: 0.6875rem 1rem; font-size: 0.8125rem; color: var(--sage-bright); font-weight: 500;
}
.jw-signal-dot {
width: 0.4375rem; height: 0.4375rem; border-radius: 999px; background: var(--sage-bright);
animation: dot-pulse 2.4s infinite; flex-shrink: 0;
}
/* ── Empty / error states ──────────────────────────────────────────────── */
.jw-empty { text-align: center; padding: 2.5rem 1.5rem; border: 1px dashed var(--hair-2); border-radius: var(--r-card); }
.jw-empty-title { font-family: var(--font-display); font-size: 1.1875rem; color: var(--text-2); margin: 0 0 0.375rem; font-weight: var(--display-weight); }
.jw-empty-sub { font-size: 0.8125rem; color: var(--text-4); margin: 0 0 1.125rem; }
.jw-error {
display: flex; align-items: flex-start; gap: 0.75rem;
border: 1px solid rgba(198, 107, 92, 0.3); background: var(--brick-fill);
border-radius: var(--r-card); padding: 0.8125rem 0.9375rem;
}
.jw-error-title { font-size: 0.84375rem; font-weight: 600; color: var(--brick-soft); }
.jw-error-sub { font-size: 0.78125rem; color: var(--text-3); margin-top: 0.1875rem; }
/* ── Misc ──────────────────────────────────────────────────────────────── */
.jw-avatar-lg {
width: 3.25rem; height: 3.25rem; border-radius: 999px; background: var(--bg-3);
border: 1px solid var(--gold-border); color: var(--gold-bright);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 1.25rem; flex-shrink: 0;
}
.jw-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.jw-faint { color: var(--text-4); }
.jw-hero-eyebrow {
font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--gold-muted); margin-bottom: 0.625rem;
}
.jw-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5625rem; }
.jw-points li { display: flex; gap: 0.625rem; font-size: 0.8125rem; line-height: 1.55; color: var(--text-2); }
.jw-points li::before { content: "\2014"; flex-shrink: 0; }
.jw-points.is-good li::before { color: var(--sage); }
.jw-points.is-bad li::before { color: var(--brick); }
/* ── Work experience rows (v4 candidate + shared pages) ────────────────── */
.jw-work { display: flex; flex-direction: column; }
.jw-work-row {
display: grid; grid-template-columns: minmax(0, 1fr) auto;
gap: 0.5rem 1rem; align-items: baseline;
padding: 0.75rem 0; border-bottom: 1px solid var(--hair);
}
.jw-work-row:last-child { border-bottom: none; }
.jw-work-title { font-size: 0.84375rem; font-weight: 600; color: var(--text); }
.jw-work-co { font-size: 0.75rem; color: var(--text-3); margin-top: 0.125rem; }
.jw-work-right { display: flex; align-items: center; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; }
.jw-work-dates { font-family: var(--font-mono); font-size: 0.65625rem; letter-spacing: 0.06em; color: var(--text-4); white-space: nowrap; }
.jw-work-desc { grid-column: 1 / -1; font-family: var(--font-editorial); font-size: 0.78125rem; line-height: 1.65; color: var(--text-2); margin: 0.375rem 0 0; }
.jw-work-facts { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 0.65625rem; letter-spacing: 0.04em; color: var(--text-4); margin-top: 0.3125rem; }
/* Opt-in compact mode (the internal candidate page): the LinkedIn paragraph
and parsed facts stay hidden until hover (desktop) or tap (touch), so the
list scans. The read-only share page leaves them expanded. */
.jw-work.is-collapsible .jw-work-row.is-expandable { cursor: pointer; }
.jw-work.is-collapsible .jw-work-desc,
.jw-work.is-collapsible .jw-work-facts {
max-height: 0; overflow: hidden; opacity: 0; margin-top: 0;
transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease), margin-top var(--dur) var(--ease);
}
.jw-work.is-collapsible .jw-work-row:hover .jw-work-desc,
.jw-work.is-collapsible .jw-work-row:focus-within .jw-work-desc,
.jw-work.is-collapsible .jw-work-row.is-open .jw-work-desc { max-height: 26.25rem; opacity: 1; margin-top: 0.4375rem; }
.jw-work.is-collapsible .jw-work-row:hover .jw-work-facts,
.jw-work.is-collapsible .jw-work-row:focus-within .jw-work-facts,
.jw-work.is-collapsible .jw-work-row.is-open .jw-work-facts { max-height: 5rem; opacity: 1; margin-top: 0.3125rem; }
/* ── Transcript turns (shared by the candidate + share pages) ──────────── */
.jw-turn { padding: 0.4375rem 0 0.4375rem 0.75rem; border-left: 2px solid var(--hair-2); margin-bottom: 0.5rem; }
.jw-turn.is-interviewer { border-left-color: var(--gold); }
.jw-turn-who {
font-family: var(--font-mono); font-size: 0.59375rem; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--text-4); display: block; margin-bottom: 0.1875rem;
}
.jw-turn-text { font-size: 0.8125rem; line-height: 1.6; color: var(--text-2); }
/* ==========================================================================
V4 THEME ENGINE -- APP SHELL, FORM CONTROLS + LAYOUT VARIANTS
Ported from the redesign-v4 export's styles.css. Strictly ADDITIVE: only
selectors that did not already exist in this file are included, so no page
that already ships .jw-* classes changes. The html[data-layout="..."] blocks
at the bottom are the export's sidebar layout variants, driven by
app/theme.js. ASCII only.
========================================================================== */
/* -- App shell -------------------------------------------------------- */
.jw-app { display: flex; min-height: 100vh; }
.jw-sidebar {
width: var(--sidebar-w); flex-shrink: 0; position: sticky; top: 0; height: 100vh;
display: flex; flex-direction: column;
background: var(--bg-deep); border-right: 1px solid var(--hair);
}
.jw-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1875rem; padding: 1.5rem 1.375rem 1rem; }
.jw-brand-mark {
width: 1.875rem; height: 1.875rem; border-radius: 999px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--gold-border); color: var(--gold);
font-family: var(--font-display); font-size: 0.9375rem;
}
.jw-brand-name {
font-family: var(--font-display); font-size: 1.3125rem; font-weight: var(--display-weight); letter-spacing: -0.01em;
color: var(--text); line-height: 1.1;
}
.jw-brand-org { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-4); margin-top: 0.125rem; }
.jw-side-search {
display: flex; align-items: center; gap: 0.5625rem; margin: 0.125rem 0.625rem 0.25rem; padding: 0.4375rem 0.75rem;
border: none; border-radius: var(--r-input); background: var(--hair);
color: var(--text-4); font-size: 0.75rem; cursor: pointer;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.jw-side-search:hover { background: var(--hair-2); color: var(--text-2); }
.jw-side-search kbd { margin-left: auto; font-family: var(--font-mono); font-size: 0.59375rem; color: var(--text-5); border: 1px solid var(--hair); border-radius: 4px; padding: 0.0625rem 0.3125rem; }
.jw-side-next {
margin: 0; padding: 0.8125rem 1.375rem 0.75rem; border: none; border-top: 1px solid var(--hair);
border-radius: 0; background: none; display: block; text-decoration: none;
transition: background var(--dur-fast) var(--ease);
}
.jw-side-next:hover { background: var(--hair); }
.jw-side-next-label { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright); }
.jw-side-next-body { font-size: 0.78125rem; font-weight: 600; color: var(--text); margin-top: 0.3125rem; }
.jw-side-next-sub { font-family: var(--font-mono); font-size: 0.625rem; color: var(--text-3); margin-top: 0.125rem; }
.jw-nav { flex: 1; overflow-y: auto; padding: 1rem 0.625rem 0.75rem; display: flex; flex-direction: column; gap: 0.125rem; }
.jw-nav-label {
font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--text-4); padding: 1rem 0.625rem 0.4375rem;
}
.jw-nav-label:first-child { padding-top: 0.25rem; }
.jw-nav-item {
display: flex; align-items: center; gap: 0.6875rem; padding: 0.5rem 0.75rem; border-radius: var(--r-input);
color: var(--text-2); font-size: 0.84375rem; font-weight: 500; text-decoration: none;
position: relative; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.jw-nav-item:hover { background: var(--hair); color: var(--text); }
.jw-nav-item.is-active { background: var(--gold-fill); color: var(--gold-bright); }
.jw-nav-item svg { width: 1rem; height: 1rem; flex-shrink: 0; opacity: 0.75; }
.jw-nav-item.is-active svg { opacity: 1; }
.jw-nav-badge {
margin-left: auto; font-family: var(--font-mono); font-size: 0.625rem;
padding: 0.0625rem 0.4375rem; border-radius: 999px; background: var(--bg-tint); color: var(--text-3);
}
.jw-side-foot { padding: 0.125rem 0.625rem 0.75rem; }
.jw-side-user { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; border-radius: 8px; text-decoration: none; color: inherit; }
.jw-side-user:hover { background: var(--hair); }
.jw-side-user-name { font-size: 0.78125rem; font-weight: 600; color: var(--text-2); }
.jw-side-user-role { font-size: 0.6875rem; color: var(--text-4); }
.jw-content { flex: 1; min-width: 0; padding: 1.625rem 2.25rem 3.5rem; }
/* -- Rules, cards, grid helpers --------------------------------------- */
.jw-rule { border: none; border-top: 1px solid var(--hair); margin: 1.75rem 0; }
.jw-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 1.125rem 1.5rem 0; }
.jw-card-title { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin: 0; }
.jw-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); gap: 1.25rem; }
.jw-split-hero { display: grid; grid-template-columns: 16.25rem minmax(0, 1fr); }
.jw-with-panel { display: grid; grid-template-columns: minmax(0, 1fr) 22.5rem; gap: 1.75rem; align-items: start; }
@media (max-width: 1180px) { .jw-with-panel { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .jw-split-hero { grid-template-columns: minmax(0, 1fr); } }
/* -- Buttons: selected state (theme settings option buttons) ---------- */
.jw-btn.is-on { background: var(--gold-fill); color: var(--gold-bright); border-color: var(--gold-border); }
/* -- Chips: neutral + gold -------------------------------------------- */
.jw-chip-neutral { background: var(--bg-tint); color: var(--text-3); }
.jw-chip-gold { background: var(--gold-fill); color: var(--gold-bright); border: 1px solid var(--gold-border); }
/* -- Dot plot ---------------------------------------------------------- */
.jw-plot { width: 100%; }
.jw-plot text { font-family: var(--font-mono); }
.jw-plot-legend { display: flex; flex-wrap: wrap; gap: 1.125rem; margin-top: 0.875rem; font-size: 0.71875rem; color: var(--text-3); align-items: center; }
.jw-plot-legend span { display: inline-flex; align-items: center; gap: 0.4375rem; }
/* -- Tables ------------------------------------------------------------ */
.jw-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.jw-table th {
font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--text-4); text-align: left; padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--hair-2);
}
.jw-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--hair); color: var(--text-2); vertical-align: middle; }
.jw-table tr:last-child td { border-bottom: none; }
.jw-table tbody tr { transition: background var(--dur-fast) var(--ease); }
.jw-table tbody tr:hover { background: var(--bg-tint); }
.jw-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
/* -- Forms ------------------------------------------------------------- */
.jw-field { display: flex; flex-direction: column; gap: 0.5rem; }
.jw-label { font-family: var(--font-mono); font-size: 0.65625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.jw-input, .jw-select, .jw-textarea {
height: 2.375rem; padding: 0 0.75rem; border-radius: var(--r-input); background: var(--bg-deep);
border: 1px solid var(--hair-2); color: var(--text); font-size: 0.875rem; width: 100%;
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.jw-textarea { height: auto; padding: 0.75rem 0.875rem; line-height: 1.55; resize: vertical; }
.jw-input::placeholder { color: var(--text-4); }
.jw-input:focus, .jw-select:focus, .jw-textarea:focus { outline: none; border-color: var(--gold-border); box-shadow: var(--ring); }
.jw-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px; background-repeat: no-repeat; }
.jw-toggle { position: relative; width: 2.5rem; height: 1.375rem; border-radius: 999px; background: var(--bg-tint); border: 1px solid var(--hair-2); transition: background var(--dur) var(--ease); flex-shrink: 0; display: inline-block; }
.jw-toggle::after { content: ""; position: absolute; top: 0.125rem; left: 0.125rem; width: 1rem; height: 1rem; border-radius: 999px; background: var(--text-3); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.jw-toggle.is-on { background: var(--gold); border-color: var(--gold); }
.jw-toggle.is-on::after { transform: translateX(18px); background: var(--bg-deep); }
.jw-setting { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--hair); }
.jw-setting:last-child { border-bottom: none; }
.jw-setting-name { font-size: 0.875rem; font-weight: 500; color: var(--text); }
.jw-setting-sub { font-size: 0.75rem; color: var(--text-3); margin-top: 0.1875rem; }
/* -- Verdict + states -------------------------------------------------- */
.jw-verdict-name { font-family: var(--font-display); font-size: 1.6875rem; font-weight: var(--display-weight); color: var(--text); }
.jw-skel { border-radius: 6px; background: linear-gradient(90deg, var(--bg-3) 25%, var(--bg-tint) 50%, var(--bg-3) 75%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
.jw-loading { display: flex; flex-direction: column; align-items: center; gap: 1.125rem; padding: 4.5rem 0; color: var(--text-4); }
.jw-loading-mark { width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid var(--gold-border); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.25rem; color: var(--gold); animation: dot-pulse 2s infinite; }
.jw-loading-word { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.3em; text-transform: uppercase; }
.jw-orbit g[stroke] { stroke: var(--text); }
.jw-orbit circle { fill: var(--text); }
.jw-phase { font-family: var(--font-editorial); font-style: italic; font-size: 0.8125rem; color: var(--gold-muted); min-height: 1.5em; }
/* -- Misc -------------------------------------------------------------- */
.jw-divider-v { width: 0.0625rem; align-self: stretch; background: var(--hair); }
.jw-muted { color: var(--text-3); }
/* ==========================================================================
LAYOUT AXIS -- html[data-layout="side|spine|top|masthead|float|dock|sheet"]
Written by app/theme.js (the ThemeBar select + the Layout group on
app/theme-settings.html). "side" is the default and sets no attribute.
These rules target the REAL app shell, i.e. what app/partials/sidebar.html
actually renders inside every app/*.html page:
.shell > .sidebar