/* ==========================================================================
remote-cyber-jobs portal — design system v3, "verified anywhere"
(FEAT-12, 2026-08-20 — supersedes FEAT-04 v2's "paper & ink" system.)
NOTE (portal review #40): this header used to say the admin surface was a
permanent fork loading style-admin-legacy.css. FEAT-16 item 7 REVERSED
that by explicit user direction — /admin and /admin/login load THIS
stylesheet like every other page, and base.html no longer keys its
on request.endpoint. style-admin-legacy.css remains on disk,
unreferenced, as a historical/rollback artifact per this project's
convention of not deleting shipped work; nothing loads it.
Built directly against the approved reference mockup,
pipeline/reference-feat-12-landing-mockup.html — its :root token block
(12 custom properties), section patterns (hero, "spot the fake" listing
comparison, 4-stop dashed pipeline explainer, category chips, ticket-stub
CTA) and copy are the authoritative spec for this pass, not just
inspiration. One resolved, PRD-required deviation (§1.2): the mockup
embeds both fonts as inline base64 @font-face data URIs; this stylesheet
self-hosts them as separate static/fonts/*.woff2 files instead — the
same self-hosting MECHANISM FEAT-04 v2 already established for
Fraunces/Inter, for the reasons named in the PRD (no per-page base64
payload bloat, one consistent font-hosting convention across both design
generations, avoids a second "large embedded blob in markup" pattern).
========================================================================== */
/* --------------------------------------------------------------------------
Fonts — self-hosted, NOT loaded from any CDN at runtime (PRD §3 non-goal
6). Both are real Google Fonts, both confirmed SIL Open Font License 1.1
by fetching each family's actual OFL.txt directly from
github.com/google/fonts (not assumed), committed under
static/fonts/LICENSES/. The two woff2 files here were extracted verbatim
from the reference mockup's own embedded base64 payloads (byte-for-byte
identical font data — decoded, written to disk, and confirmed as valid
woff2 via their `wOF2` magic bytes — never re-derived or re-encoded).
- Archivo (variable, weight axis 400-800) — body copy, nav, labels,
buttons, kickers/eyebrows. Matches the mockup's own weight-range
declaration exactly.
- Archivo Black (static, weight 400 only) — display headings (h1/h2/h3),
the brand wordmark, stat numbers. A single heavy cut used ONLY for
display type, mirroring the mockup's own usage.
========================================================================== */
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("fonts/archivo-variable.woff2") format("woff2");
}
@font-face {
font-family: "Archivo Black";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/archivo-black.woff2") format("woff2");
}
/* --------------------------------------------------------------------------
Tokens
-------------------------------------------------------------------------- */
:root {
/* The 12 tokens from the reference mockup's own :root block, verbatim —
names and values unchanged (PRD success metric item 2: all 12 must
survive into the real stylesheet, not a renamed/reduced subset). */
/* v4 "matte" (2026-08-25) — approved from a mockup by the account owner.
Same token NAMES as v3 so no rule below needed renaming; only the values
moved. Three deliberate shifts:
1. the accent is desaturated (#00d9a3 neon mint -> #5fb89a) and the
negative softened (#ff5c4d -> #d18374);
2. --line becomes a SOLID colour rather than rgba(255,255,255,.14).
Once every glow and coloured shadow is removed, borders are the only
thing separating surfaces, and the old alpha line was nearly
invisible against the ground — this is what made the first, darker
pass read as murky rather than flat;
3. the whole ground is lifted a step (#0a1120 -> #171d26). */
--ink: #171d26;
--ink-raised: #212936;
--ink-raised-2: #2b3543;
--paper: #eef2f4;
--text: #f0f3f7;
--text-dim: #aab6c6;
--line: #3c4757;
--line-soft: #333d4b;
--accent: #5fb89a;
--accent-deep: #71c7aa;
--accent-ink: #0c1512;
--stamp: #d18374;
--stamp-dim: rgba(209, 131, 116, 0.18);
--accent-dim: rgba(95, 184, 154, 0.18);
/* Additional, non-mockup tokens needed to actually build a working app UI
(forms, tables, a caution state distinct from both error and success) —
additive, not a replacement of any of the 12 above. Coral (--stamp) is
reserved ONLY for negative/gated/error states per the PRD (§3 item 1);
--warn is a separate amber used for the one caution-not-error state
this app already has (the sub-threshold generation warning), so it
never borrows the negative color for something that isn't a failure. */
--warn: #d4ac68;
--warn-dim: rgba(212, 172, 104, 0.18);
--font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Arial, sans-serif;
--font-display: "Archivo Black", "Archivo", sans-serif;
/* Type scale — 6 steps (>=4 required by FEAT-04's own carried-forward
criterion, re-verified here against the NEW system per PRD §5 item 3). */
--text-xs: 0.8125rem; /* 13px — meta, timestamps, kickers/eyebrows */
--text-sm: 0.9375rem; /* 15px — labels, table cells, nav */
--text-base: 1.0625rem; /* 17px — body */
--text-lg: 1.375rem; /* 22px — card/section h2 */
--text-xl: 2.375rem; /* 38px — page h1 */
--text-2xl: 3.25rem; /* 52px — hero h1 (clamped, see .hero h1) */
/* Spacing scale (4/8/12/16/24/32/48/64) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
/* Radius — rounder than FEAT-04 v2's crisp-editorial system on purpose:
the mockup's own pill buttons/chips (999px) and rounded cards (14-20px)
read as a modern, verification-badge/passport-stamp motif, not the
print-editorial feel v2 was going for. */
/* v4: one size system for every small control — see .badge's own comment.
--control-min was first set to 6.5rem, which made every badge as wide as
the widest button. That looked right in isolation and broke /admin: the
Users table carries badges in two columns AND a select+button pair in two
more, so an 8-column row blew past the 1280px container and clipped
"Deactivate". 4.5rem is the compromise that actually holds — wide enough
that "yes" is not a tiny lozenge next to "Deactivate", narrow enough that
the table still fits. Shared HEIGHT, radius, font-size and padding are
what really make the controls read as one family; identical width was
never achievable alongside a dense table. */
--control-min: 4.5rem;
--control-h: 30px;
/* Widest a single-line form control is ever allowed to get, regardless of
how wide its page shell is. 40rem ≈ 640px — comfortably longer than any
value actually typed into these fields (a job title, a city, a salary)
while staying inside one eye span, so the label and the caret are not at
opposite ends of the screen. */
--field-max: 40rem;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
/* v4: was 999px. Kept as a token (rather than replaced at each use site) so
the pill/squared decision stays in ONE place — and the landing page's
round stamp-badge, which genuinely wants a circle, uses 50% directly and
is unaffected. */
--radius-pill: 6px;
/* v4: flat. Every shadow is now `none` rather than being deleted at each
of its 7 use sites — one place to reverse this if it ever needs to come
back, and no rule below had to change. --shadow-accent in particular was
a 30px green halo under every button; that glow is the single biggest
reason the old system read as "neon". */
--shadow-sm: none;
--shadow-md: none;
--shadow-accent: none;
--transition-fast: 140ms ease;
}
/* --------------------------------------------------------------------------
Base
-------------------------------------------------------------------------- */
* { box-sizing: border-box; }
/* Portal review #29: without this, the browser renders every NATIVE control
in its light-mode skin against this dark ground — unchecked radios and
checkboxes as stark white circles/squares (ten of them on /onboarding),
the file input's "Choose file" as a light macOS button, and select
dropdowns/scrollbars to match. `accent-color` above only colours a control
once it is CHECKED; this is what fixes the unchecked and chrome states. */
:root { color-scheme: dark; }
html, body {
margin: 0;
padding: 0;
}
body {
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: 1.6;
background: var(--ink);
color: var(--text);
-webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 400; /* Archivo Black has only one real weight; 400 is its
normal cut, matching the mockup's own h1/h2 rules */
color: var(--text);
margin: 0 0 var(--space-3);
line-height: 1.1;
letter-spacing: -0.01em;
}
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
/* FEAT-17 (pipeline/10-prd-feat-17.md §3 item 4): a bare, un-.card-wrapped
section heading (e.g. /profile's "Core strengths"/"Target roles") gets no
top margin from the shared h1,h2,h3 rule above (margin: 0 0 var(--space-3)
is bottom-only) — .card's own margin-bottom already gives every OTHER
section on the page consistent separation; this closes the same gap for
a heading that isn't itself inside a .card. --space-5 matches .card's own
margin-bottom so a bare section heading gets the identical visual rhythm
as a card-wrapped one. */
.section-heading { margin-top: var(--space-5); }
p { margin: 0 0 var(--space-3); color: var(--text); }
a { color: var(--accent); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
/* Kicker / eyebrow — small-caps-style label above a page's display headline.
Same role FEAT-04 v2's .kicker played, restyled onto the new tokens; kept
the exact class name so every existing template needs zero markup change
(PRD's own stated preference: reuse class names, minimize template diffs). */
.kicker {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--text-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 var(--space-2);
}
.lede {
color: var(--text-dim);
font-size: var(--text-sm);
/* Portal review round 2: was 46ch, which is tighter than any readability
guidance calls for (the usual range is 55–75) and broke short one-sentence
ledes into three ragged lines directly under a display-size h1 — the
narrowest text on the page sitting under the widest. 64ch keeps a real
measure without the stutter. */
max-width: 64ch;
/* Stops the last line falling to a one- or two-word orphan, which is what a
hard max-width does to a two-line sentence. Unsupported browsers just
wrap normally. */
text-wrap: pretty;
}
/* --------------------------------------------------------------------------
Header / nav — sticky masthead with a blurred glass background over the
dark ground, matching the mockup's header.site exactly. This is the ONE
piece of chrome shared by literally every page — the admin surface
included, which since FEAT-16 item 7 loads this same stylesheet (portal
review #40: the note here claiming admin loads style-admin-legacy.css
was stale).
-------------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 20;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-4);
padding: var(--space-4) var(--space-6);
background: rgba(10, 17, 32, 0.86);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
flex-wrap: wrap;
}
/* 2026-08-27 — the brand is the supplied lockup image, not type.
`.brand` is now purely the link box; the former glowing-dot span and the
"RealRole" text node are both gone from the markup (the lockup already
contains the wordmark, so keeping the text would render it twice). The
font/colour declarations that styled that text were removed with it —
nothing inherits them any more. Hover moves to opacity because `color`
has no effect on an image. */
.site-header .brand {
text-decoration: none;
display: inline-flex;
align-items: center;
transition: opacity var(--transition-fast);
}
.site-header .brand img {
display: block;
height: 30px;
width: auto;
}
.site-header .brand:hover { opacity: 0.82; text-decoration: none; }
.site-header .brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.site-header nav {
display: flex;
align-items: center;
gap: var(--space-5);
flex-wrap: wrap;
}
.site-header nav a {
color: var(--text-dim);
text-decoration: none;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: var(--space-1) 0;
border-bottom: 1px solid transparent;
transition: color var(--transition-fast), border-color var(--transition-fast);
}
.site-header nav a:hover {
color: var(--text);
border-bottom-color: var(--accent);
text-decoration: none;
}
.site-header nav a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Portal review #43: an "admin session is active" marker in the header.
Coral (--stamp) is this system's elevated/gated state colour, and an
active admin session is exactly that -- it is deliberately NOT the accent,
so it never reads as an ordinary nav item. Non-interactive (a , no
href), so it can't be confused for a link to somewhere. */
.site-header nav a.nav-tag {
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-pill);
border: 1px solid var(--stamp);
background: var(--stamp-dim);
color: var(--stamp);
font-weight: 800;
border-bottom: 1px solid var(--stamp); /* beats the nav a border-bottom reset */
}
.site-header nav a.nav-tag:hover {
background: var(--stamp);
color: var(--ink);
border-color: var(--stamp);
text-decoration: none;
}
/* Divider between the admin-session group and the user-session group when a
browser holds both at once -- without it the two independent sets of links
(each with its own sign-out) read as one flat list. */
.site-header nav .nav-sep {
width: 1px;
align-self: stretch;
min-height: 1.2em;
background: var(--line);
}
/* "Get started free" nav CTA — the one pill-shaped button in the header,
matching the mockup's .nav-cta exactly. */
.site-header nav a.nav-cta {
color: var(--ink);
background: var(--accent);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-pill);
text-transform: none;
letter-spacing: normal;
font-weight: 700;
border-bottom: none;
transition: background var(--transition-fast);
}
.site-header nav a.nav-cta:hover {
background: var(--accent-deep);
color: var(--ink);
text-decoration: none;
}
/* --------------------------------------------------------------------------
Layout
-------------------------------------------------------------------------- */
.container {
max-width: 820px;
margin: 0 auto;
padding: var(--space-5) var(--space-5) var(--space-6);
}
/* The shell for every SIGNED-IN application page — /dashboard, /admin, and
(portal review round 2) the three nav tabs /profile, /onboarding and
/settings/2fa. /admin drove the original widening (a data-dense ops page
whose 9-column tables scrolled horizontally inside an 820px column while
leaving large empty margins either side of it), but the reason it applies
to all of them is navigational, not per-page: at 1440px the narrow
.container puts content at x=334 while this one puts it at x=104, so
clicking between Dashboard and Profile shifted the whole page sideways by
230px. Every tab now shares ONE left edge. Auth/transient pages
(login, register, reset, generation status, message) deliberately stay on
the centred narrow .container — a single focused card is what they are. */
.container-wide {
max-width: 1280px;
}
/* Widening the shell must not widen the form controls with it: a 1232px text
input is unusable, and it is the reason /profile and /admin could be wide
long before the form pages could follow. Cap the controls, not the page —
cards, tile grids, chip groups and radio columns still use the full width.
Scoped to the wide shell so the narrow auth pages keep 100%-width fields. */
.container-wide input[type="text"],
.container-wide input[type="email"],
.container-wide input[type="tel"],
.container-wide input[type="password"],
.container-wide input[type="file"],
.container-wide select,
.container-wide textarea {
max-width: var(--field-max);
}
/* Capping the width above re-opened space to the right of every field, and an
inline-block that no longer fills its line lets the NEXT element sit
beside it — on /settings/2fa the submit button silently jumped up alongside
the password box. Blockifying the controls restores "one control per line"
as a property of the control rather than an accident of its width. Flex
parents (.inline-form on /admin) blockify their children anyway, so the
deliberately side-by-side select+button pairs there are unaffected. */
.container-wide input[type="text"],
.container-wide input[type="email"],
.container-wide input[type="tel"],
.container-wide input[type="password"],
.container-wide select,
.container-wide textarea {
display: block;
}
/* A submit button directly after a field needs the separation the wrap used
to give it for free. Matches .form-panel > button's existing --space-5.
The type list is NOT decoration: a bare `input + button` also matches the
hidden CSRF input that precedes the button in every mutating form, which
pushed /admin's "Deactivate" 12px out of line with its status badge. Only
inputs that actually occupy a line can justify spacing the next one. */
.container-wide form > input[type="text"] + button,
.container-wide form > input[type="email"] + button,
.container-wide form > input[type="tel"] + button,
.container-wide form > input[type="password"] + button,
.container-wide form > input[type="file"] + button,
.container-wide form > input[type="text"] + .btn,
.container-wide form > input[type="email"] + .btn,
.container-wide form > input[type="tel"] + .btn,
.container-wide form > input[type="password"] + .btn,
.container-wide form > input[type="file"] + .btn {
margin-top: var(--space-5);
}
/* Same argument for page-level prose: a paragraph sitting directly in the
1232px shell (e.g. /profile's "Generated — this is what the daily
matching run scores every job against…") ran ~150 characters per line, well
past where the eye reliably finds the next line. Direct children only —
paragraphs INSIDE a card or a match row are already constrained by it. */
.container-wide > p {
max-width: 80ch;
text-wrap: pretty;
}
/* The landing page's own override (base.html's {% block main_class %})
— full-bleed, no centering/padding of its own, because each
below manages its own background (some full-width, some not) and inner
.wrap (max-width: 72rem, centered) exactly like the reference mockup. */
.landing-main {
max-width: none;
margin: 0;
padding: 0;
}
/* --------------------------------------------------------------------------
Page header block — kicker + display h1 + optional lede
-------------------------------------------------------------------------- */
.page-head { margin-bottom: var(--space-5); }
.page-head h1 { margin-bottom: var(--space-2); }
/* --------------------------------------------------------------------------
Forms
-------------------------------------------------------------------------- */
.form-panel {
padding-top: var(--space-6);
border-top: 1px solid var(--line);
}
label {
display: block;
margin-top: var(--space-5);
margin-bottom: var(--space-1);
font-weight: 700;
font-size: var(--text-sm);
color: var(--text);
}
label:first-of-type { margin-top: 0; }
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea {
width: 100%;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--ink-raised);
font-family: var(--font-sans);
font-size: var(--text-base);
color: var(--text);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:hover, select:hover, textarea:hover { border-color: #2a3a5c; }
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(95, 184, 154, 0.22);
}
input::placeholder, textarea::placeholder { color: var(--text-dim); }
input[type="file"] {
width: 100%;
padding: var(--space-3);
cursor: pointer;
font-family: var(--font-sans);
font-size: var(--text-sm);
color: var(--text);
border: 1px dashed var(--line);
border-radius: var(--radius-sm);
background: var(--ink-raised);
transition: border-color var(--transition-fast);
}
input[type="file"]:hover { border-color: var(--accent); }
/* --------------------------------------------------------------------------
Consent checkbox (FEAT-05) — kept out of the block-label/bordered-input
pattern above, same reasoning FEAT-04 v2 recorded: a checkbox reading
"Consent" above an empty box would be meaningless on its own.
-------------------------------------------------------------------------- */
.consent-row {
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin-top: var(--space-5);
}
.consent-row input[type="checkbox"] {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 3px;
accent-color: var(--accent);
cursor: pointer;
}
.consent-row label {
display: inline;
margin: 0;
font-weight: 400;
font-size: var(--text-sm);
color: var(--text);
cursor: pointer;
}
/* --------------------------------------------------------------------------
Radio groups (FEAT-07) — seniority / work authorization
-------------------------------------------------------------------------- */
fieldset.choice-fieldset {
border: none;
padding: 0;
margin: var(--space-5) 0 0;
}
.choice-fieldset legend {
padding: 0;
margin-bottom: var(--space-2);
font-weight: 700;
font-size: var(--text-sm);
color: var(--text);
}
.choice-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.choice-option {
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin: 0;
font-weight: 400;
cursor: pointer;
}
.choice-option input[type="radio"] {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: var(--accent);
cursor: pointer;
}
.choice-option span {
font-size: var(--text-base);
color: var(--text);
}
/* Portal review #3: this used to be `display: none` unless the "other" radio
was checked (`#wa_fieldset:has(#wa_other:checked)`). Two problems, one
cosmetic and one a real data bug: FEAT-07 specifies this field as ALWAYS
allowed regardless of which option is picked (§3, "a hybrid, never a hard
replacement" — it is the safety valve for a compound situation), and a
`display: none` input is still SUBMITTED, so a detail saved alongside any
non-"other" option became invisible and uneditable while continuing to be
written back on every save and fed into profile_gen's prompt. Always
visible now, which matches the documented design and removes the
invisible-but-live-value problem entirely. */
.detail-field {
margin-top: var(--space-4);
padding-left: calc(18px + var(--space-3));
}
/* --------------------------------------------------------------------------
Chip group — dual-purpose, deliberately: the SAME rule set is used both
for the interactive job-category checkbox chips on /onboarding (an
inside each chip) and the static, read-only category chips on the
new landing page (a bare , no input at all) — one
visual language, reused rather than building a second "chip" look for the
landing page (PRD's own "reuse before building" instruction). The
:has(input:checked)/:has(input:focus-visible) selectors simply never
match on a chip with no input, which is harmless.
-------------------------------------------------------------------------- */
.chip-group {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-2);
/* FEAT-17 (pipeline/10-prd-feat-17.md §3 item 4) gave this a margin-bottom
so whatever follows a .chip-group (e.g. /profile's "Scoring guidance"
.card) has guaranteed separation. Portal review #34: it was --space-2
(8px) mirroring the top, but the heading ABOVE a chip group is
.section-heading at --space-5 (24px) — so on /profile the next card
nearly touched the chips while every other gap on the page breathed.
Matched to --space-5 for one consistent rhythm. */
margin-bottom: var(--space-5);
}
.chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin: 0;
padding: var(--space-2) var(--space-4);
border: 1px solid var(--line);
border-radius: var(--radius-pill);
background: var(--ink-raised-2);
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--text-sm);
color: var(--text);
cursor: pointer;
transition: border-color var(--transition-fast), background var(--transition-fast);
}
.chip:hover { border-color: var(--accent); }
.chip:has(input:checked) {
background: var(--accent-dim);
border-color: var(--accent);
color: var(--text);
}
.chip:has(input:focus-visible) {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.chip input[type="checkbox"] {
width: 14px;
height: 14px;
margin: 0;
accent-color: var(--accent);
cursor: pointer;
}
.chip span { cursor: pointer; }
/* --------------------------------------------------------------------------
Buttons / links styled as buttons — the mockup's pill-shaped, high-
contrast primary CTA, applied uniformly (PRD §3 non-goal 4: one design
system, no theme switcher) to every submit action in the app, not just
the marketing page's own CTAs.
-------------------------------------------------------------------------- */
/* Portal review #27: `margin-top: var(--space-6)` used to live HERE, on every
button in the app, and was overridden in exactly two places (.hero .cta-row,
.stub). That put 32px of dead space above every button that isn't a form's
closing submit: a ~32px empty band inside every dashboard match card, two
stacked generate buttons 32px apart on mobile, and admin table buttons
hanging visibly below the baseline of every other cell in their row. The
separation is only ever wanted where a submit button closes a form panel,
so it is scoped to exactly that below. */
button, .btn {
display: inline-block;
border: 1px solid var(--accent);
padding: var(--space-3) var(--space-5);
background: var(--accent);
color: var(--ink);
border: none;
border-radius: var(--radius-pill);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: 800;
letter-spacing: 0.01em;
text-decoration: none;
cursor: pointer;
box-shadow: var(--shadow-accent);
transition: background var(--transition-fast), transform var(--transition-fast);
}
/* A destructive or secondary action in a table row. Every button in this
codebase currently renders as the solid accent primary, so "Remove" and
"Deactivate" carry exactly the visual weight of "Save" — the two controls a
user least wants to hit by accident look like the one they came to press.
Outlined and neutral until hovered, where it turns the negative colour so
the consequence is stated before the click rather than after it. */
button.btn-quiet, .btn.btn-quiet {
background: transparent;
color: var(--text-dim);
border: 1px solid var(--line);
box-shadow: none;
}
button.btn-quiet:hover, .btn.btn-quiet:hover {
background: transparent;
border-color: var(--stamp);
color: var(--stamp);
}
button:hover, .btn:hover {
background: var(--accent-deep);
border-color: var(--accent-deep);
color: var(--ink);
text-decoration: none;
}
button:active, .btn:active { transform: translateY(1px); }
button:focus-visible, .btn:focus-visible {
outline: 2px solid var(--text);
outline-offset: 2px;
}
/* Portal review #27: the one place the old global top margin was actually
right — a submit button closing a form panel needs real separation from
the last field above it. Direct children only, so a button nested in a
table cell / action row inside a panel is unaffected. */
.form-panel > button,
.form-panel > .btn {
margin-top: var(--space-5);
}
/* Portal review #37: a label that must exist for assistive tech but would be
visually redundant (a per-row control in a table whose column header
already names it). Clip rather than display:none — a display:none label is
not announced at all, which defeats the point. */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Portal review #38: marks a required field in a form that mixes required and
optional inputs with no visual difference between them. Paired with a
legend at the top of the form — an asterisk alone explains nothing. */
.req { color: var(--stamp); font-weight: 800; margin-left: 2px; }
.form-legend { color: var(--text-dim); font-size: var(--text-xs); margin: 0 0 var(--space-2); }
/* Portal review #35: the two numbered steps of TOTP enrollment, each as its
own block, so the manual-entry key clearly closes step 1 instead of
floating between the two. */
.enroll-step { margin-bottom: var(--space-5); }
.enroll-step:last-child { margin-bottom: 0; }
.enroll-step > p:first-child { font-weight: 700; }
.enroll-secret {
margin-top: var(--space-3);
color: var(--text-dim);
font-size: var(--text-sm);
}
.enroll-secret code {
display: inline-block;
margin-top: var(--space-1);
font-size: var(--text-sm);
letter-spacing: 0.04em;
color: var(--text);
}
/* A 6-character code does not want a 100%-width field. */
.code-input { max-width: 11rem; letter-spacing: 0.28em; font-variant-numeric: tabular-nums; }
/* Portal review #39: the two halves of one decision (confirm / cancel) on one
row, at two clearly-ranked weights, rather than a pill button with a 13px
hint link stranded on the line below it. */
.confirm-actions {
display: flex;
align-items: center;
gap: var(--space-4);
flex-wrap: wrap;
margin-top: var(--space-4);
}
.confirm-actions form { margin: 0; }
/* Portal review #28: a form living inside a table cell (admin.html's per-row
tier control, the deactivate/reactivate control). These used to carry
`.form-panel`, whose `padding-top: 32px` + `border-top` drew a stray
full-width rule and 32px of padding INSIDE every cell, stretching rows to
~115px and making the select span the whole column. An inline control row
is what those cells actually want. */
.table-inline-form {
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0;
/* Stage-30 D2 (pipeline/30-qa-portal-review.md): the .visually-hidden
labels inside these cells are `position: absolute`, and with no
positioned ancestor they resolve against the initial containing block —
escaping .table-wrap's `overflow-x: auto` and pushing /admin's own
horizontal scroll to 284px at 390px wide. Establishing a containing
block here keeps them inside the scroll container. (Both obvious probes
miss this: body.scrollWidth stays correct and an unclipped-offender scan
comes back empty — see QA's note.) */
position: relative;
}
.table-inline-form select {
width: auto;
min-width: 6.5rem;
padding: var(--space-1) var(--space-2);
font-size: var(--text-sm);
}
.table-inline-form button {
margin: 0;
min-width: var(--control-min);
height: var(--control-h);
padding: 0 var(--space-3);
font-size: var(--text-xs);
box-shadow: none;
}
.table-inline-form select {
min-width: var(--control-min);
height: var(--control-h);
padding: 0 var(--space-2);
font-size: var(--text-xs);
}
/* --------------------------------------------------------------------------
States — coral (--stamp) is reserved ONLY for negative/gated/error states
(PRD §3 item 1), which is exactly .error below. --warn (amber, NOT coral)
covers the one caution-but-not-failure state this app has (FEAT-09's
sub-threshold generation warning) so a caution is never visually
conflated with an actual error/rejection.
-------------------------------------------------------------------------- */
.error {
color: var(--stamp);
background: var(--stamp-dim);
border: 1px solid var(--stamp);
border-radius: var(--radius-sm);
padding: var(--space-3) var(--space-4);
margin: 0 0 var(--space-4);
font-size: var(--text-sm);
}
.warning {
color: var(--warn);
background: var(--warn-dim);
border: 1px solid var(--warn);
border-radius: var(--radius-sm);
padding: var(--space-3) var(--space-4);
margin: 0 0 var(--space-4);
font-size: var(--text-sm);
}
.hint {
color: var(--text-dim);
font-size: var(--text-xs);
margin: var(--space-1) 0 0;
}
.meta { color: var(--text-dim); font-size: var(--text-sm); }
.meta a { font-weight: 600; }
/* --------------------------------------------------------------------------
Data cards — profile/dashboard content surfaces
-------------------------------------------------------------------------- */
.card {
background: var(--ink-raised);
border: 1px solid var(--line);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: var(--space-4) var(--space-5);
margin-bottom: var(--space-4);
}
.card h1 { margin-bottom: var(--space-4); }
.card > p:last-child { margin-bottom: 0; }
/* --------------------------------------------------------------------------
Tile grid (FEAT-10) — same surface/border/radius/shadow recipe as .card,
at grid-cell scale; no new token introduced.
-------------------------------------------------------------------------- */
.tile-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--space-4);
margin-top: var(--space-3);
margin-bottom: var(--space-5);
}
.tile {
background: var(--ink-raised);
border: 1px solid var(--line);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: var(--space-4) var(--space-5);
font-size: var(--text-sm);
color: var(--text);
}
/* --------------------------------------------------------------------------
Tables
-------------------------------------------------------------------------- */
.table-wrap {
border: 1px solid var(--line);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow-x: auto;
margin-top: var(--space-4);
}
table { width: 100%; border-collapse: collapse; }
th, td {
text-align: left;
padding: var(--space-2) var(--space-3);
font-size: var(--text-sm);
border-bottom: 1px solid var(--line);
color: var(--text);
}
thead th {
background: var(--ink-raised-2);
color: var(--text-dim);
font-weight: 700;
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
}
tbody tr { transition: background var(--transition-fast); }
tbody tr:hover { background: rgba(95, 184, 154, 0.09); }
tbody tr:last-child td { border-bottom: none; }
.job-id-fallback {
color: var(--text-dim);
font-size: var(--text-xs);
/* FEAT-14 (pipeline/10-prd-feat-14.md §2 Part A): same overflow fix shape
FEAT-13 already applied to .match-link -- a real job_id fallback string
is a long composite "source:source_id" value (e.g. a base64-blob-bearing
jsearch id) that otherwise overflows the card. */
overflow-wrap: anywhere;
word-break: break-word;
}
/* --------------------------------------------------------------------------
Match list (dashboard) -- replaces the original FEAT-12 table layout,
which cut off the rightmost column(s) on anything narrower than a wide
desktop viewport (`.table-wrap`'s old `overflow: hidden` clipped instead
of scrolling) and had no room for a description snippet. A stacked list
of cards handles variable-length description text far better than a
rigid grid of columns ever could, and never needs horizontal scrolling.
-------------------------------------------------------------------------- */
.match-list {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-top: var(--space-4);
}
.match-card {
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--ink-raised-2);
padding: var(--space-4) var(--space-5);
}
.match-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
flex-wrap: wrap;
}
.match-score {
/* FEAT-13 (pipeline/10-prd-feat-13.md §2/§6): a compact corner element,
not the lead -- markup order in dashboard.html now puts the title
first; this pushes the score to the right via the head's own
justify-content: space-between rather than an explicit margin/order,
so it still wraps under the title gracefully on a narrow card. */
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 3.4em;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-sm);
background: var(--accent-dim);
border: 1px solid var(--accent);
color: var(--accent);
font-weight: 800;
font-size: var(--text-sm);
font-variant-numeric: tabular-nums;
}
.match-title {
margin: 0;
font-weight: 700;
font-size: var(--text-base);
color: var(--text);
/* FEAT-14 (pipeline/10-prd-feat-14.md §2 Part A): same overflow fix shape
FEAT-13 already applied to .match-link -- .match-title is also a flex
child of .match-card-head (display: flex), so min-width: 0 is needed
alongside overflow-wrap for the same reason (a flex item's default
min-width: auto otherwise refuses to shrink below the unbroken
job_id-fallback content width). Live-verified with a real long job_id
string -- see pipeline/20-build-feat-14.md. */
overflow-wrap: anywhere;
word-break: break-word;
min-width: 0;
}
.match-company { color: var(--text-dim); font-weight: 500; }
.match-desc {
margin: var(--space-3) 0 0;
color: var(--text-dim);
font-size: var(--text-sm);
line-height: 1.6;
}
.match-reason {
/* FEAT-13: the sanitized "why it matches" line -- sits between the
description and the eligibility/delivery meta row per the PRD's card
ordering. Italicized to visually read as the model's own reasoning,
distinct from the factual job-description snippet above it. */
margin: var(--space-3) 0 0;
color: var(--text);
font-size: var(--text-sm);
font-style: italic;
line-height: 1.6;
}
.match-card-meta {
display: flex;
align-items: center;
gap: var(--space-4);
flex-wrap: wrap;
margin-top: var(--space-4);
}
.match-link {
font-weight: 700;
/* FEAT-13 (pipeline/10-prd-feat-13.md §4 non-goal 5 / §7 risk 5): a long
unbroken job-posting URL (several real ones in jobs.db exceed 80 chars)
overflowed the card -- this was the one missing CSS rule. min-width: 0
is the companion flex-overflow fix named in the PRD as likely needed:
without it, a flex item's default min-width: auto refuses to shrink
below the URL's own unbroken content width, so overflow-wrap alone is
not sufficient inside a flex row. */
overflow-wrap: anywhere;
word-break: break-word;
min-width: 0;
}
.match-card-actions {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--line);
}
/* FEAT-14 (pipeline/10-prd-feat-14.md §2 Part B): two independent generate
forms now sit side by side where there's room, wrapping on a narrow card,
rather than each