/ ) instead of one
pre-wrapped blob, so it reads like a document rather than a paste.
It keeps its own scroll container. Letting the whole modal grow instead was tried and is
worse: these run to 7,000 characters, so the panel became several screens tall and the
title, score and Apply button scrolled away above the text you were reading. Bounded here,
the description scrolls under a header that stays put. overscroll-behavior stops a flick at
the bottom of the JD from carrying on and scrolling the page behind the modal. */
/* NOT A BOX. No background, no border, no padding, and no max-height or overflow.
All of that belonged to the modal, where the description shared a fixed-height panel with a
header and a footer and needed an edge to sit inside. On a page it read as a quoted blob pasted
in from somewhere else rather than as the page's own content, and the nested scroll container
gave you two scrollbars. The description is the main thing here, so it is set as prose: type
size and rhythm carry it, and the section heading above is the only boundary it needs. */
.jd{font-size:var(--text-base);line-height:1.7;color:var(--ink)}
.jd p{margin:0 0 var(--space-150)}
/* ONE RULE, and it used to be two. `.jd h4.jdh` was declared here at --text-2xs/18px and AGAIN
~20 lines down at --text-xs/22px, so what rendered was this rule's weight, colour and caps
with THAT rule's size and margin -- and the comment here, which explained sizing these to
match .sechdr, had described nothing for as long as the second rule existed. The surviving
declaration is that effective cascade written out once. Same footgun CLAUDE.md flags for
.cardverdict: a second rule further down the file wins silently and nothing looks broken.
The live rationale for the size is below, where the second rule was. */
.jd h4.jdh{font-size:var(--text-xs);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:var(--space-250) 0 var(--space-100)}
.jd ul{margin:0 0 var(--space-150);padding-left:var(--space-250)}
.jd li{margin:0 0 var(--space-050)}
.jd > :first-child{margin-top:0}
.jd > :last-child{margin-bottom:0}
/* The employer's own section labels, normalised by BUCKET and not by text: jdrender keeps their
wording ("Basic Qualifications" is not the same promise as "Preferred Qualifications") and
tags it, so the recognised kinds can be told apart without rewriting anybody's words. */
/* ---- THE CANONICAL SECTION HEAD, 2026-09-05 -------------------------------------------------
OUR LABEL IS THE HEADING; THEIRS IS THE SUBTITLE. Every posting renders the same stack in the
same order (jdrender SEC_ORDER), so .jdlabel is what the eye learns and what it can rely on
being in the same place on the next job. The employer's own wording follows it in lighter ink
because it still carries information our label cannot: "Basic Qualifications" and "Minimum
Qualifications" both land in Required and are not the same promise.
NOT UPPERCASE, unlike the bare .jdh above. These are section titles now rather than eyebrow
labels on somebody else's prose, and at --text-xs uppercase they read as a caption on the
paragraph under them -- the same failure .sechdr has, documented at the top of this block.
ONE DECLARATION, and it is written out once on purpose. This rule and the border-left it
carries were briefly two separate `.jd h4.jdh[data-sec]` blocks twenty lines apart, which is
the footgun CLAUDE.md flags for .cardverdict and that this very file has already been bitten
by twice (see the note above about .jdh being declared at two sizes). Same specificity, so the
later one silently wins property by property and the earlier comment describes nothing. */
.jd h4.jdh[data-sec]{color:var(--muted);border-left:3px solid var(--border-strong);
padding-left:9px;text-transform:none;font-size:var(--text-sm);letter-spacing:normal;
display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-100)}
.jd .jdlabel{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--ink);
letter-spacing:var(--tracking-tight);text-transform:none}
/* AN ECHO IS HIDDEN, NOT DROPPED. When the employer's heading says what our label already says,
rendering both stutters -- but deleting it in the renderer is text loss and the conservation
check in scripts/test_jdrender.py fails on it. It stays in the DOM and goes away here, which
also spares a screen reader the same word twice. */
.jd .jdecho{display:none}
/* A SECOND RUN IN THE SAME SECTION keeps its own label. An employer who wrote both "Basic
Qualifications" and "Minimum Qualifications" gets both, under one Required heading. */
.jd h5.jdsub{font-size:var(--text-xs);font-weight:600;color:var(--muted);
margin:var(--space-200) 0 var(--space-050);text-transform:none}
/* AN INFERRED SECTION IS MARKED, and this is the whole reason the flag exists. Nothing here
said "Responsibilities" until 2026-09-05; on a description the employer never sectioned, that
heading is OUR reading of their text, not their claim. A dotted rule rather than a solid one,
so a reader can see which boundaries were drawn by us -- and so the tier stays auditable in
the rendered corpus instead of being invisible once it ships. */
.jd h4.jdh[data-inferred]{border-left-style:dotted}
.jd h4.jdh[data-inferred] .jdlabel{color:var(--muted)}
/* The description's own blurb about the employer, under the page's About heading. Same prose
rhythm as .jd, no section furniture: jdrender emits this half with no heading at all. */
.jdabout{margin-bottom:var(--space-200)}
/* ONE STATE LINE, where four sentences used to be. Terse and factual: it says which of the two
opposite facts applies ("the employer did not say" versus "we have not read it"), and nothing
about what the posting failed to contain. */
.jdstate{font-size:var(--text-sm);color:var(--muted);margin:0 0 var(--space-150)}
/* REQUIRED is the only section that gets the accent rule, and PREFERRED deliberately does not.
They were one bucket until the six-bucket split, and the whole point of splitting them is
that a reader can tell a must-have from a nice-to-have at a glance — giving both the same
emphasis would put the distinction back where it was. Preferred keeps the neutral rule every
other section has, which is what makes Required stand out. */
.jd h4.jdh[data-sec="req"]{border-left-color:var(--accent)}
/* The five buckets carried an anchor glyph here for one afternoon on 2026-09-03 and were
removed the same day at the owner's direction. What still separates a description's sections
is what always did: the employer's own heading text, the left rule, and the accent on `req`.
THE EMPLOYER'S OWN WORDING IS NOT TOUCHED and that is the part to keep. "Basic Qualifications"
and "Preferred Qualifications" both classify as requirements and mean different things;
jdrender keeps both and test_job_page asserts it. */
/* WHY --text-xs AND NOT SMALLER (the rule itself is above, declared once). Unboxed, the JD's
own headings have to carry more weight than the modal's 11px eyebrows did, or a
4,000-character description reads as one undifferentiated run. */
/* ---- AT A GLANCE -----------------------------------------------------------------------------
FIVE FACTS, FIVE TRACKS, AND THE SHAPE NEVER CHANGES. This replaced "What This Posting Asks
For", a four-row definition list whose empty rows each carried a sentence explaining what the
employer had not written. On a page where most rows are empty that is a paragraph of our voice
standing in front of the employer's, and the owner's instruction on 2026-09-05 was a dash
instead.
auto-fit with a MINIMUM, not a fixed count: at 1440 it is five across, at 900 three, on a
phone two. What has to hold is that Salary is always the first cell and Education always the
last, so the same fact is in the same place on the next posting -- which is the entire reason
the block exists.
NO BOX. The .asks version had a border, a surface fill and a radius, which read as a widget
bolted onto the page. These are the employer's facts stated plainly; a rule under the header
is boundary enough. */
.jobglance{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
gap:var(--space-200) var(--space-300);margin:0 0 var(--space-300);
padding:0 0 var(--space-250);border-bottom:1px solid var(--border-subtle)}
.jobglance > div{min-width:0}
.jobglance dt{font-family:var(--font-data);font-size:var(--text-3xs);text-transform:uppercase;
letter-spacing:var(--tracking-wide);color:var(--muted);margin-bottom:3px}
.jobglance dd{margin:0;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--ink);
line-height:1.35;overflow-wrap:anywhere}
/* AN EMPTY CELL IS A DASH AND SAYS NOTHING ELSE. Muted so a row of them reads as absence rather
than as content, and it must stay a glyph: this is the table saying "no value", not the prose
dash CLAUDE.md's copy rules ban. */
.jobglance .nil{color:var(--border-strong);font-weight:400}
/* AN INFERENCE IS LABELLED AS ONE. The years read off a title are a 96%-accurate guess, and a
guess printed in the same ink as a stated fact is worse than no answer at all. The sentence
that used to follow it is a title= tooltip now -- tip.js promotes those for touch. */
.asks-guess{border-bottom:1px dotted var(--border-strong);cursor:help}
.jdjump{display:flex;flex-wrap:wrap;gap:var(--space-100);margin:0 0 var(--space-100)}
.jdjump a{font-size:var(--text-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;
text-decoration:none;color:var(--muted);background:var(--surface2);border:1px solid var(--line);
border-radius:var(--radius-full);padding:4px 11px}
.jdjump a:hover{color:var(--ink);border-color:var(--border-strong)}
/* EEO and legal notices, collapsed. already has global styling, so this only needs to
sit apart from the description above it. */
.jdlegal{margin-top:var(--space-150);border-top:1px solid var(--line);padding-top:var(--space-100)}
.jdlegal summary{font-size:var(--text-2xs);color:var(--muted);font-weight:600}
.jdlegal p,.jdlegal li{font-size:var(--text-2xs);color:var(--muted)}
/* MATCHED and MISSING keywords, inline in the description. GREEN and RED, on Kunal's call
2026-08-11: the first pass used an ink tint and a dotted rule to keep the chromatic budget on
sponsorship, and it was too quiet to scan. Green for what you already have, red for what would
help — a legend at the top of the description says exactly that, so the two colours are defined
on screen rather than assumed. They reuse the status tokens, which already carry this meaning
everywhere else in the product and are already contrast-checked. */
mark.kw-have{background:var(--kw-have-bg);color:var(--kw-have-text);
border-radius:3px;padding:0 3px;font-weight:600}
mark.kw-miss{background:var(--kw-miss-bg);color:var(--kw-miss-text);
border-radius:3px;padding:0 3px;font-weight:600}
.kwlegend{font-size:var(--text-xs);color:var(--muted);margin:0 0 var(--space-150)}
/* The chip lists under the description use the SAME green and red as the marks in it, or the
legend teaches one colour code and the lists below it use another. Scoped to .jobmain because
.tag.miss is an ordinary outlined chip on the company page (its tech stack) and must stay one. */
.jobmain .kw .tag.miss{background:var(--kw-miss-bg);color:var(--kw-miss-text);box-shadow:none}
/* ---- THE JOB PAGE ------------------------------------------------------------------------
FULL WIDTH, on Kunal's call 2026-08-11. It was --layout-page-max (1280px) with the reading
column held at --layout-prose-max (68ch), which is the textbook measure for prose and left a
1920px screen mostly empty either side — it read as a narrow strip of content in a lot of grey.
It now uses the feed's own --layout-feed-max and lets the column take whatever the aside does
not, so the page fills the screen the way every other page in the product does.
The measure is the acknowledged trade: body text runs wider than 68ch on a large monitor. It is
mitigated rather than ignored — 15px type with 1.7 line-height, and the JD's own headings and
lists break the run up every few paragraphs, so it is a description with structure rather than
an unbroken wall.
DOM order equals the narrow-viewport order, which is why there is no `order` anywhere here:
reordering with CSS would leave tab order following the source and reading order following the
screen, and the two would disagree. */
.jobwrap{max-width:var(--layout-feed-max);margin:0 auto;padding:0 var(--space-300) var(--space-600)}
.jobhead{display:flex;gap:var(--space-200);align-items:flex-start;margin:0 0 var(--space-300)}
.jobhead h1{margin:0;line-height:1.15;font-size:var(--text-xl);letter-spacing:var(--tracking-tight)}
.jobident{color:var(--muted);font-size:var(--text-sm);margin-top:5px;display:flex;flex-wrap:wrap;
align-items:center;gap:4px}
.jobident a{color:var(--ink);font-weight:600;text-decoration:none}
.jobident a:hover{text-decoration:underline}
/* Every date on this page is absolute and set in the data face. There is no relTime twin here on
purpose: formatDates lives in app.js, which this page does not load. */
.jobdate{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:var(--text-xs)}
.jobcols{display:grid;grid-template-columns:1fr;gap:var(--space-500)}
/* No max-width: the column takes the whole track. min-width:0 is load-bearing, or a long
unbroken run inside the description sets the grid item's automatic minimum size and pushes the
track past the container — the same min-content floor that made the feed scroll sideways. */
.jobmain{min-width:0}
.jobaside{min-width:0}
@media (min-width:1040px){
.jobcols{grid-template-columns:minmax(0,1fr) 340px}
/* THE ACTIONS STICK, NOT THE WHOLE RAIL. `.jobaside{position:sticky}` pins the TOP of the
aside, so the moment its content is taller than the viewport -- which the rich role rows
made routine -- Apply scrolls off the bottom and the sticky does nothing for the one thing
the reader opened the page to press. Sticking the action block instead keeps Apply on screen
and lets the lists scroll past it.
Only where there is room: on a phone a sticky block would eat the viewport. */
.jobaside-act{position:sticky;top:calc(var(--topbar-h) + var(--space-200));z-index:1;
background:var(--surface);padding-bottom:var(--space-200)}
}
.jobaside-act{display:flex;flex-direction:column;gap:var(--space-100);margin-bottom:var(--space-200)}
/* The route band carries the card's own wash, so walking from the feed to this page does not
change colour underneath the reader. The rest of the page stays a plain reading surface: a
tint under 7,000 characters of description is a different proposition from a tint on a card. */
.jobrail{background:var(--route-h1b-fill);border:1px solid var(--route-h1b-line);
border-radius:var(--radius-lg);padding:var(--space-200);margin:0 0 var(--space-300)}
.jobrail-facts{display:flex;flex-wrap:wrap;gap:var(--space-400);margin-bottom:var(--space-200)}
.jobrail .eyebrow{display:block;font-family:var(--font-data);font-size:var(--text-3xs);
text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--muted);margin-bottom:2px}
.jobroute b{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--ink)}
.jobstat b{font-family:var(--font-data);font-size:var(--text-2xl);
font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;
letter-spacing:var(--tracking-tight);line-height:1.1;display:block}
/* Same three values the card's arc uses, so a 72% reads the same colour in both places. */
.jobstat b.meter-strong{color:var(--match-strong)}
.jobstat b.meter-good{color:var(--match-good)}
.jobstat b.meter-weak{color:var(--match-weak)}
.jobnote{font-size:var(--text-xs);color:var(--muted);margin:2px 0 0;max-width:34ch;line-height:1.45}
.jobacts{display:flex;flex-wrap:wrap;gap:var(--space-100);align-items:center}
.jobact-form{display:flex;flex-wrap:wrap;gap:var(--space-100);margin:0}
.jobchips{margin:var(--space-150) 0 0}
/* Neutral chips on a tinted band, the same treatment cards get. */
.jobrail .pay,.jobrail .rem,.jobrail .exp,.jobrail .intl,.jobrail .agency,.jobrail .closed,.jobrail .repost,.jobrail .jdadmit,
.jobrail .cx{background:var(--on-card-veil)}
.jobrail .btn:not(.primary){background:transparent}
.jobrail .btn:not(.primary):hover{background:var(--on-card-veil)}
/* The five-route table with a tip per route lived here. It answered "what is an H-1B", which is
not what somebody who opened a job description came to find out, and it pushed the description
itself below the fold. Sponsorship is two sentences at the foot of the page now, and /company
keeps the per-route detail and the year by year chart. */
/* OTHER ROLES AT THIS EMPLOYER, in the rail. A sideways jump, so it belongs beside the posting
rather than inside it. The 3px edge is the accent at full strength rather than the pale line,
because at this size a wash would not read at all — but it is one colour now, like the cards:
the stripe marks the row, it no longer classifies it. */
/* A ROW, NOT A LINK. These were a bare title over a 10px meta line with a coloured left edge,
and the owner's report was that they did not look like anything: "it doesn't look appealing,
it's not effective at all". A row now carries the employer's logo, the title, and the facts
worth choosing on -- place, remote, pay, match -- in a three-track grid so the score column
lines up down the list the way the feed's fact cells do.
THE LEFT RULE IS GONE. It marked the row and classified nothing (one hue, since 2026-09-01),
so with a logo tile beside it it was a second vertical edge doing no work. */
.simlist{list-style:none;margin:0 0 var(--space-200);padding:0}
.simrow{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:var(--space-150);
align-items:start;padding:var(--space-150) 0;border-bottom:1px solid var(--border-subtle)}
.simrow:last-child{border-bottom:0}
.simlogo{width:28px;height:28px;object-fit:contain;border-radius:var(--radius-sm);
background:var(--surface2);flex:0 0 auto}
/* The initials tile, for the employers we have no logo for. Same box, so the title column starts
at the same offset on every row whether or not the logo exists. */
.simmono{display:flex;align-items:center;justify-content:center;font-family:var(--font-data);
font-size:var(--text-3xs);font-weight:700;color:var(--muted)}
/* min-width:0 is load-bearing on BOTH: without it a long unbroken title sets the grid item's
automatic minimum and pushes the score column out of the 340px rail. */
.simbody{min-width:0}
.simtitle{display:block;font-size:var(--text-xs);font-weight:600;color:var(--ink);
text-decoration:none;line-height:1.35}
.simtitle:hover{text-decoration:underline}
.simmeta{display:flex;flex-wrap:wrap;gap:2px var(--space-100);align-items:baseline;margin-top:3px;
font-size:var(--text-3xs);color:var(--muted)}
.simscore{font-family:var(--font-data);font-variant-numeric:tabular-nums;
font-size:var(--text-2xs);font-weight:var(--weight-semibold)}
/* The metadata header some boards stack one line at a time — Clearance Level / None / Category /
Software Engineering — which used to render as a ladder of orphaned paragraphs. Two explicit
columns rather than auto-placement, so a label with SEVERAL values (Key Skills For Success) keeps
all of them in the value column instead of letting the second one fall under the label. */
.jdkv{display:grid;grid-template-columns:minmax(6.5rem,max-content) 1fr;
gap:2px var(--space-200);margin:0 0 var(--space-300);align-items:baseline}
.jdkv dt{grid-column:1;font-size:var(--text-3xs);letter-spacing:.06em;text-transform:uppercase;
color:var(--muted);font-weight:var(--weight-semibold);padding-top:2px}
.jdkv dd{grid-column:2;margin:0;font-size:var(--text-xs);color:var(--ink);line-height:1.5}
/* A field's second and later values sit tight under the first so the group reads as one answer. */
.jdkv dd + dd{padding-top:1px}
@media (max-width:640px){
.jdkv{grid-template-columns:1fr;gap:0 0}
.jdkv dt{grid-column:1;margin-top:var(--space-150)}
.jdkv dd{grid-column:1}
}
/* Employer name in the "Similar Roles" rail. It is the one field that varies down that list and
the reason to click a row, so it reads darker than the rest of the meta line and is allowed to
take the space, with the numbers and location holding their own width beside it. */
.simco{color:var(--ink);font-weight:var(--weight-medium);overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;max-width:11em;flex:0 1 auto}
.simscore.meter-strong{color:var(--match-strong)}
.simscore.meter-good{color:var(--match-good)}
.simscore.meter-weak{color:var(--match-weak)}
.jobaside-apply{width:100%;justify-content:center;margin-bottom:var(--space-300)}
/* Buttons on the job page embed the EMPLOYER NAME — "Tailor for General Dynamics Information
Technology", "All 6 Roles at General Dynamics Information Technology" — and the base .btn is
white-space:nowrap. A long name therefore sets a min-content floor wider than a phone, which
pushed the whole PAGE 34px sideways at 390px and 49px at 375px. Completely invisible in a
screenshot; found by measuring scrollWidth - innerWidth across widths. Scoped to .jobwrap so
the feed's inline chip rows keep their single-line shape. */
.jobwrap .btn{white-space:normal;text-align:center}
.jobgone-url{font-family:var(--font-mono);font-size:var(--text-xs);word-break:break-all;
color:var(--muted)}
.modal-foot{display:flex;gap:var(--space-100);align-items:center;padding:14px 24px 20px;border-top:1px solid var(--line);margin-top:12px;position:sticky;bottom:0;background:var(--surface)}
/* toasts */
.toasts{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:var(--space-100);z-index:var(--z-toast)}
.toast{background:var(--ink);color:var(--bg);padding:11px 15px;border-radius:var(--r);font-size:var(--text-sm);font-weight:500;box-shadow:var(--e2);animation:slidein .2s ease}
@keyframes slidein{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
/* The ASKING toast (applyask.js): "did you apply to X?" after an Apply click. Wider and taller
than a notification because it holds a job title and two real buttons, and it does not fade,
so it must be readable at rest rather than glanceable.
max-width, not width: a one-word company should not draw a 380px box. */
.toast-ask{display:flex;flex-direction:column;gap:var(--space-150);max-width:min(380px,88vw);
padding:14px 16px;align-items:stretch}
.toast-ask .ask-q{font-weight:var(--weight-semibold);line-height:1.4}
.toast-ask .ask-btns{display:flex;gap:var(--space-100);justify-content:flex-end}
/* Both buttons are stated against the TOAST, which inverts the page: its background is --ink
and its text is --bg in both themes. So the affirmative is filled with the page's own colours
-- 17.98:1 in light, 16.48:1 in dark -- and the negative borrows the toast's own text colour,
which is the same contrast the question above it already has. Neither needs a new token. */
.toast-ask .ask-yes,.toast-ask .ask-no{font:inherit;font-size:var(--text-xs);font-weight:700;
padding:7px 13px;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;
transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.toast-ask .ask-yes{background:var(--bg);color:var(--ink);border:1px solid var(--bg)}
.toast-ask .ask-yes:hover{background:var(--bg-hover)}
.toast-ask .ask-no{background:transparent;color:var(--bg);border:1px solid currentColor;
opacity:.75}
.toast-ask .ask-no:hover{opacity:1}
.toast-ask .ask-yes:focus-visible,.toast-ask .ask-no:focus-visible{outline:2px solid var(--bg);
outline-offset:2px}
/* careers / addboard / misc */
.careers h2{font-size:var(--text-md);margin:22px 0 6px}.careers h3{font-size:var(--text-base);margin:12px 0 4px}
.careers li{list-style:none;margin:3px 0}
.addform{display:flex;flex-direction:column;gap:var(--space-150);max-width:560px}
.result{padding:11px 14px;border-radius:var(--r);margin:12px 0}
.result.ok{background:var(--status-success-bg);border:1px solid var(--status-success-bg);color:var(--status-success-text)}
.result.err{background:var(--danger-soft);border:1px solid var(--danger);color:var(--danger)}
.result.info,.result.sql{background:var(--blue-soft);border:1px solid var(--line);color:var(--blue)}
pre{background:#11131a;color:#cdd3e1;padding:12px;border-radius:var(--r);overflow:auto;font-size:var(--text-2xs)}
/* A board row carries a raw careers URL, which has no spaces to break at, so on a phone it
pushed the page 502px wide. overflow-wrap:anywhere lets it break mid-string, min-width:0
lets the flex child actually shrink to allow that, and the row wraps rather than squeezing
the Remove button to nothing. */
.brow{display:flex;align-items:center;gap:var(--space-150);justify-content:space-between;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;margin:8px 0;background:var(--surface)}
.brow > div{flex:1 1 240px;min-width:0}
.brow .muted{overflow-wrap:anywhere}
.back{font-size:var(--text-xs);display:inline-block;margin-bottom:8px;font-weight:500}
/* loading */
@keyframes spin{to{transform:rotate(360deg)}}
.spin{display:inline-block;width:16px;height:16px;border:2.5px solid var(--line);border-top-color:var(--brand);border-radius:var(--radius-full);animation:spin .7s linear infinite;vertical-align:middle;flex-shrink:0}
@keyframes shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}
/* .shim / .shim-chip / .shim-tag / .shim-bar / .shim-row lived here: the job modal's loading
shimmer, whose only caller was openModal(). The modal is gone and /job is server-rendered,
so there is nothing left to shim. @keyframes shimmer above STAYS: the feed's own .skel
loading card uses it. (Those two used to share names, which is why .shim was renamed.) */
/* score ring */
/* THE MATCH METER. Green at 70 and up, amber 40 to 69, red below 40 — the thresholds live in
scoreRing() in app.js and the colours live here, so neither can be changed by accident from
the other side. The class names are magnitude, not hue, so re-tuning a colour never means
renaming a class. */
.ring-strong{--ring-color:var(--match-strong);--ring-track:var(--match-track)}
.ring-good{--ring-color:var(--match-good);--ring-track:var(--match-track)}
.ring-low{--ring-color:var(--match-weak);--ring-track:var(--match-track)}
.score-ring{flex-shrink:0;display:block}
/* A CIRCLE, because everything else in this slot is one. It was radius-md -- a rounded square
sitting between .score-ring (an SVG circle) and .score-none (a dashed circle), at the same
46px, in the same corner. Three states, two shapes, and the odd one out was the one that
appears most often. Reported from the live feed 2026-09-02 as looking like a different kind
of element, which is exactly what it was.
The labels stay INSIDE the circle rather than moving to the chip row: "don't add a second
chip to the card" is a decision this project has already walked back twice, and the whole
point of this slot is that one glance at the top-right corner answers "how well does this
match me". An empty circle would have matched .score-none more cleanly, but it would make
"not read yet" and "can never be read" identical -- a distinction that cost real work to
establish -- and a bare glyph in this circle has already been tried and read as a rendering
artefact.
font-size stays on the type scale at --text-3xs. That is what forced "No description" to
become "No JD" in app.js: "description" is ~62px at 11px type and the circle's usable chord
is ~40px, so the honest choices were a shorter word or a font size the rest of the product
never uses. The tooltip still carries the full sentence. */
.score-pending{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0 3px;border-radius:var(--radius-full);font-size:var(--text-3xs);font-weight:700;line-height:1.1;text-align:center;color:var(--muted);background:var(--surface2);border:1px dashed var(--warn-line)}
/* No résumé: the card holds the ring's space but shows no number, so the layout doesn't shift
once scoring starts and nothing on the card claims a match we cannot compute. Deliberately
quiet — this is an absence, not a warning, and an empty dashed ring says that on its own
without a character typed into the middle of it. */
.score-none{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
width:46px;height:46px;border-radius:var(--radius-full);color:var(--muted);
background:transparent;border:1px dashed var(--line-strong);cursor:help}
.loading-jd{display:flex;align-items:center;gap:var(--space-150);color:var(--muted);font-size:var(--text-sm);padding:8px 4px}
/* page progress */
.page-progress{position:fixed;top:0;left:0;height:2px;background:var(--accent);z-index:var(--z-progress);pointer-events:none;width:0;opacity:0;border-radius:0 var(--radius-full) var(--radius-full) 0}
/* --- BETWEEN PAGES ----------------------------------------------------------------------
A cross-fade on same-origin navigations. Two lines of CSS, no JavaScript and no framework:
the browser snapshots the old page, loads the new one and fades between them. Browsers
without support ignore the at-rule entirely and navigate exactly as they do today, so there
is nothing to feature-detect and nothing to fall back to.
It complements #pgbar rather than replacing it -- the bar says "something is happening" for
a slow route, this smooths the swap once the bytes arrive.
150ms on purpose. The default is 250ms, which on a fast internal link reads as the app
being sluggish rather than as polish. The global reduced-motion override at the top of this
file cannot reach these: it selects *, *::before and *::after, and none of those match a
::view-transition pseudo-element. So they are silenced explicitly. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.15s;animation-timing-function:var(--ease-out)}
@media (prefers-reduced-motion:reduce){
::view-transition-old(root),::view-transition-new(root){animation:none}
}
/* ============ Resume Brain ============ */
.rb{max-width:920px;margin:0 auto}
.rb h1{font-size:var(--text-xl);margin:0 0 4px}
.rb h2{font-size:var(--text-md);margin:0}
/* flex-direction:column for the reason .cocard carries it: .card's base rule is the
FEED card's layout and these are document cards. Above the feed's 1760 breakpoint
an and its paragraph sat SIDE BY SIDE with the heading crushed to its own
text width (measured 77px against 870). Column, not block: flex margins do not
collapse, and these children are spaced by their own margins. */
.rb .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;margin:0 0 16px;flex-direction:column}
.rb .card.ai{border-left:3px solid var(--accent)}
.rb .muted{color:var(--muted)}
.rb .small{font-size:var(--text-xs)}
/* .dzcap is the caption above a .dropzone, which is itself a -- so it cannot BE a label
without nesting one inside another and making the click target ambiguous. It shares this rule
rather than getting its own copy, because the whole point is that it looks like the labels
above and below it. */
.rb label,.rb .dzcap{display:block;margin:12px 0;font-weight:600;font-size:var(--text-sm)}
.rb label .muted{font-weight:400}
.rb .req{color:var(--danger)}
.rb .grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-200)}
.rb .row{display:flex;gap:var(--space-150);align-items:center;flex-wrap:wrap;margin-top:12px}
.rb .row.between{justify-content:space-between}
.rb .row.between h2{margin:0}
.rb textarea,.rb input[type=text],.rb input[type=password]{width:100%;box-sizing:border-box}
.rb textarea.mono{font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.5}
.rb .chips{display:flex;flex-wrap:wrap;gap:var(--space-100);margin:8px 0}
.rb .chip{display:inline-block;padding:5px 11px;border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:500;background:var(--surface2);color:var(--ink)}
.rb .chip.miss{background:transparent;color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--border-strong)}
.rb .chip.tone{background:var(--brand-soft);color:var(--brand-ink)}
.rb .cov{display:flex;align-items:center;gap:var(--space-250);margin:12px 0;background:var(--surface2);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px}
.rb .cov-num{display:flex;flex-direction:column}
.rb .cov .big{font-family:var(--font-data);font-size:var(--text-2xl);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-tight);line-height:1}
.rb .cov .big.up{color:var(--status-success-text)}
.rb .cov-arrow{display:flex;align-items:center;color:var(--text-tertiary)}
.rb .cov-arrow .ic{width:20px;height:20px}
.rb .coach{list-style:none;padding:0;margin:0}
.rb .coach li{padding:11px 0;border-bottom:1px solid var(--line)}
.rb .coach li:last-child{border-bottom:0}
.rb .storypick{display:flex;align-items:center;gap:var(--space-100);margin:0;font-weight:500}
.rb .storypick input{width:auto;margin:0;accent-color:var(--brand)}
.rb fieldset.tighten{border:1px solid var(--line);border-radius:var(--r);padding:10px 13px;margin:12px 0;display:grid;gap:var(--space-100)}
.rb fieldset.tighten legend{padding:0 6px}
.rb .badge{display:inline-block;background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius-xs);padding:1px 7px;font-size:var(--text-3xs);color:var(--muted);font-weight:600}
.rb .note{background:var(--brand-soft);border:1px solid var(--line);border-radius:var(--r);padding:10px 13px;margin:8px 0;font-size:var(--text-xs);color:var(--ink)}
.rb .note.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.rb .lesson{display:flex;justify-content:space-between;gap:var(--space-150);align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.rb .lesson:last-child{border-bottom:0}
.rb .inline{display:inline}
.rb .jobpick{margin:8px 0}
.rb .jobpick a{display:block;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);margin:5px 0;background:var(--surface2);font-weight:500}
.rb .jobpick a:hover{border-color:var(--line-strong)}
.rb .kb-item{border:1px solid var(--line);border-radius:var(--radius-md);padding:10px 13px;margin:8px 0;background:var(--surface)}
.rb summary.addnew{color:var(--brand);font-weight:600}
/* ---- admin dashboard ---- */
.adm-head{margin:0 0 16px}
.adm-nav{display:flex;gap:var(--space-025);margin:0 0 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.adm-nav a{padding:9px 15px;font-size:var(--text-sm);font-weight:600;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.adm-nav a:hover{color:var(--ink)}
.adm-nav a.on{color:var(--ink);border-bottom-color:var(--accent)}
/* auto-fit + minmax rather than a fixed column count: the tile row reflows from 5 across on a
desktop down to 1 on a phone without a single media query, and adding a sixth tile later
needs no CSS change. */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--space-150);margin:0 0 18px}
.tile{background:var(--surface);border:1px solid var(--border-card);border-radius:var(--r-lg);padding:16px 18px;display:flex;flex-direction:column;gap:var(--space-050)}
.tile.warn{border-color:var(--warn-line);background:var(--warn-bg)}
.tile-n{font-family:var(--font-data);font-size:var(--text-xl);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);line-height:1.15;font-variant-numeric:tabular-nums}
.tile-l{font-size:var(--text-sm);font-weight:600;color:var(--ink)}
.tile-s{font-size:var(--text-xs);color:var(--muted)}
.adm-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-250);align-items:start}
.adm-cols>.panel{margin:0 0 18px}
.panel h2{font-size:var(--text-base);margin:0 0 4px}
.panel h2+.muted{margin:0 0 14px}
.adm-t{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.adm-t th{text-align:left;font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;padding:0 8px 7px 0;border-bottom:1px solid var(--line)}
.adm-t td{padding:8px 8px 8px 0;border-bottom:1px solid var(--line);vertical-align:top}
.adm-t tr:last-child td{border-bottom:0}
/* A list whose HEIGHT is bounded, so the page costs the same for 3 users as for 300 -- the rows
scroll inside the panel instead of pushing everything under them off the screen. 60vh, not a
pixel value: on a laptop that is roughly a dozen rows and still leaves the panels below it
visible, and on a tall monitor it grows rather than wasting the space.
The sticky header is what makes scrolling readable -- a scrolled table with its column
labels gone is a wall of numbers. */
.adm-scroll{max-height:60vh;overflow-y:auto;overscroll-behavior:contain}
.adm-scroll .adm-t th{position:sticky;top:0;z-index:1;background:var(--surface);
/* The sticky row sits ON the scrolled content, so its bottom rule has to be a shadow: a
border would scroll with the cell box and let the first data row bleed through. */
box-shadow:inset 0 -1px 0 var(--line)}
/* The last row keeps its rule here: inside a scroll box it is the seam that shows there is
more, and dropping it (as .adm-t does) makes a full list look like it ends early. */
.adm-scroll .adm-t tr:last-child td{border-bottom:1px solid var(--line)}
.adm-scroll .adm-t td a{font-weight:600}
.adm-t .num{text-align:right;font-family:var(--font-data);font-variant-numeric:tabular-nums}
.adm-t code{font-size:var(--text-xs);background:var(--surface2);padding:1px 6px;border-radius:var(--radius-xs)}
.pill{display:inline-block;font-size:var(--text-2xs);font-weight:700;padding:2px 9px;border-radius:var(--radius-md);text-transform:uppercase;letter-spacing:.03em}
/* A status pill has to carry its status in the colour, so these keep the status tokens.
.ok used to borrow the brand tint, which now resolves to a neutral and would have left
"ok" and "unknown" looking identical. */
.pill.ok{background:var(--status-success-bg);color:var(--status-success-text)}
.pill.bad{background:var(--danger-soft);color:var(--danger)}
/* --warn-ink was never a real token, so this silently fell back to --ink and the running
pill has always rendered primary-black text on an amber field. --status-warn-text is the
contrast-checked pair for --status-warn-bg. */
.pill.run{background:var(--status-warn-bg);color:var(--status-warn-text)}
.hist{display:flex;flex-direction:column;gap:var(--space-100)}
.hist-row{display:grid;grid-template-columns:56px 1fr 56px;align-items:center;gap:var(--space-150);font-size:var(--text-xs)}
.hist-k{color:var(--muted);font-family:var(--font-data);font-variant-numeric:tabular-nums}
.hist-bar{background:var(--surface2);border-radius:var(--radius-xs);height:16px;overflow:hidden}
/* min-width so a non-zero bucket is never invisible next to a much larger one — a bar of 0px
reads as "no jobs here", which is a different fact from "few jobs here". */
.hist-bar i{display:block;height:100%;min-width:3px;border-radius:var(--radius-xs);background:var(--accent)}
.hist-v{text-align:right;font-family:var(--font-data);font-variant-numeric:tabular-nums;font-weight:var(--weight-semibold)}
.sqlblock{background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius-md);padding:14px 16px;font-size:var(--text-xs);line-height:1.5;overflow-x:auto;white-space:pre;margin:0;font-family:var(--font-mono)}
.tile .hist-bar{display:block;width:100%}
/* Supply-vs-demand: two bars per bucket on one row. Grey is what the scraper collected, colour
is what someone actually wanted, so the eye compares them without reading the numbers. */
.hist-row.sd{grid-template-columns:56px 1fr 42px 1fr 42px}
.hist-bar i.sup{background:var(--line-strong)}
.panel h3{color:var(--ink)}
/* account rows: the per-user buttons wrap instead of forcing the table wider */
.userops{display:flex;gap:var(--space-100);flex-wrap:wrap;align-items:center}
.userops form{margin:0}
.pwreset{display:inline-block}
.pwreset summary{list-style:none;display:inline-flex}
.pwreset summary::-webkit-details-marker{display:none}
/* NOTE the explicit width:auto in each of these. The base rule at the top of this file gives
every input width:100%, which inside a flex row puts each control on its own line — the
create form rendered three rows tall before this. Anything laying inputs out horizontally
has to opt back out. */
.pwform{display:flex;gap:var(--space-100);margin-top:6px}
.pwform input{width:auto;flex:1 1 150px;padding:6px 10px;border-radius:var(--radius-sm);font-size:var(--text-xs)}
.newuser{display:flex;gap:var(--space-100);flex-wrap:wrap;align-items:center}
.newuser input{width:auto;flex:1 1 200px;max-width:280px;padding:8px 12px;font-size:var(--text-sm)}
.confirmform label{display:block;font-size:var(--text-sm);margin-bottom:8px}
.confirmform input{width:100%;max-width:360px;padding:9px 12px;font-size:var(--text-sm)}
.confirmrow{display:flex;gap:var(--space-100);margin-top:14px}
.delform{display:flex;gap:var(--space-200);align-items:flex-end;flex-wrap:wrap}
.delform label{display:flex;flex-direction:column;gap:var(--space-100);font-size:var(--text-xs);color:var(--muted);flex:1 1 260px}
.delform input,.delform textarea{width:100%;font-size:var(--text-sm);padding:8px 12px}
.delform textarea{min-height:44px}
.blockrow{display:flex;gap:var(--space-100);align-items:baseline;padding:5px 0;font-size:var(--text-sm);cursor:pointer}
.blockrow input{width:auto;flex:0 0 auto;margin:0}
.btn.danger:hover{background:var(--danger-soft)}
/* responsive */
@media (max-width:900px){
.rb .grid2{grid-template-columns:1fr}
.adm-cols{grid-template-columns:1fr;gap:0}
/* Five columns (label + two bars + two numbers) don't fit a phone: the fixed tracks eat the
row and both 1fr bars collapse to 0px, which renders as two invisible bars rather than a
comparison. Stack supply over demand instead — the numbers still read side by side. */
.hist-row.sd{grid-template-columns:56px 1fr 42px;row-gap:var(--space-050)}
.hist-row.sd .hist-bar{grid-column:2}
.hist-row.sd .hist-k{grid-row:span 2;align-self:center}
/* Wide tables (per-table sizes, per-user actions) scroll rather than squeeze to nothing. */
.panel{overflow-x:auto}
}
/* THE COLUMN COUNT STOPPED DEPENDING ON THE VIEWPORT BEING GUESSED RIGHT.
Two attempts to place a three-column floor by viewport both missed the machine this is built
for -- 1600 excluded it, then 1400 excluded it -- because the width was inferred from a
screenshot instead of measured, and a breakpoint you cannot measure is the wrong mechanism.
What actually made three columns expensive was the PANEL: a fixed 156px side column out of
every card, so the white half was card-width minus 156 and a laptop had ~280px left for a
title. So the panel gives way first (below 1500 it becomes a strip inside the card and the
body gets the full width back), and only then does the grid drop a column. Three columns now
cost a card ~366px instead of ~440, which is why the floor can sit at 1080.
1760 IS SOLVED, NOT PICKED. The side column costs 156px of body, so it is worth having only
while the body still clears ~400px: body = (vw - 84)/3 - 158 >= 400 gives vw >= 1758.
Measured, the switch is stark -- at 1600 with the side column 36 of 60 titles clamped; at
1500 with the strip, 0 did, on a card 33px NARROWER. The panel was the whole cost. */
@media (max-width:1760px){
/* THE PANEL BECOMES A STRIP, and this is the whole fix. Ring, label and the sponsorship line
on one row across the top of the card; .cardbody then has the card's full width for the
title, which is what a laptop was short of. Above this the side column is better -- it
reads as a column of verdicts down the page -- so it stays there. */
.card{flex-direction:column}
.cardbody{padding:14px 18px 16px}
/* order:-1 puts the strip ABOVE the body. Source order sends it to the bottom, which left the
card ending on a heavy block with Apply and Hide stranded above it -- the actions have to be
the last thing. On a wide screen the panel is on the trailing edge and that is right;
stacked, "trailing" would put it after the buttons. */
.cardverdict{order:-1;flex:0 0 auto;width:100%;flex-direction:row;justify-content:flex-start;
align-items:center;gap:var(--space-150);padding:8px 18px;text-align:left;
border-left:0;border-bottom:1px solid var(--verdict-line)}
/* 44px, not 72. In a strip the ring sits beside its own label rather than above it, so it is
one line tall and does not need to anchor a column. */
.cardverdict .score-ring{width:44px;height:44px}
.cardverdict .score-pending,.cardverdict .score-none{width:44px;height:44px}
.cvlabel{letter-spacing:var(--tracking-normal)}
.cbadges{width:auto;margin:0 0 0 auto;padding:0;border-top:0;align-items:flex-end}
}
@media (max-width:1080px){
.feedgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:780px){
.feedgrid{grid-template-columns:1fr}
}
@media (max-width:700px){
/* 176 is 51% of a 345px body on a phone. The cap comes down with the card. */
.cmark{max-width:140px}
.cardbody{padding:16px}
.cardverdict{padding:10px 16px}
/* FIXED TRACKS EARN NOTHING HERE, so they go. Their whole purpose is comparing a cell against
the same cell on a neighbouring card, and at this width there is only ever one card on a
line -- what the grid buys instead is two empty cells holding their gaps open, so
"O'Fallon, Missouri" and "senior role" sit in opposite corners with nothing between them.
Wrapped inline, the facts read as one sentence and the blanks cost nothing. */
.cfacts{display:flex;flex-wrap:wrap;gap:var(--space-050) var(--space-200)}
.cfact-blank{display:none}
}
@media (max-width:560px){
main{padding:18px 14px 60px}
.topbar{gap:var(--space-150)}.topbar nav{order:3;width:100%}
.section-head{flex-wrap:wrap}
.cta-banner .btn{width:100%}
.modal{border-radius:var(--r-lg) var(--r-lg) 0 0}
.modal-foot{flex-wrap:wrap}
h1,.rb h1{font-size:var(--text-lg)}
.countrow{flex-wrap:wrap}
.countrow .sel{width:100%}
.tab{padding:8px 13px}
.roletiles{grid-template-columns:1fr}
.modal .rolegroups{max-height:58vh}
}
/* ---- role picker ------------------------------------------------------------------
"What kind of job do you want", which until now had two possible answers. Shared by the
feed's modal and onboarding step 3 via _rolepicker.html, so both get this styling and
neither can drift from the other. Vars only — it inherits dark mode for free. */
/* ---- ROLE PICKER --------------------------------------------------------------------
Rebuilt 2026-08-10. It was 22 bordered BOXES two across, each holding a native checkbox,
a label and a count stacked vertically. That is 960px of content in a 520px window, so
two of the four groups were always below the fold, and a role whose name wrapped made its
row taller than its partner, which left the grid visibly ragged.
One line per role instead: name on the left, count right-aligned in the data face. The
counts become a column you can scan, which matters because "how many jobs are actually
open" is the only comparative information on this screen. Twenty-two roles now fit in
roughly the height that six used to take. */
.rolepick{display:flex;flex-direction:column;gap:var(--space-250);min-width:0}
.rolesearch{display:flex;gap:var(--space-150);align-items:center}
.rolesearch input{flex:1;padding:11px 14px;border:1px solid var(--line-strong);
border-radius:var(--r);background:var(--surface);color:var(--ink);font-size:var(--text-sm);font-family:inherit}
.rolesearch input:focus{outline:none;box-shadow:var(--focus);border-color:var(--accent)}
/* A state, not a caption: it is the only thing saying the selection is capped. */
.rolecount{flex:0 0 auto;font-family:var(--font-data);font-size:var(--text-2xs);
font-variant-numeric:tabular-nums;color:var(--text-secondary);white-space:nowrap;
background:var(--bg-sunken);border:1px solid var(--border-subtle);
border-radius:var(--radius-full);padding:var(--space-050) var(--space-150)}
.rolecount b{color:var(--ink)}
/* HORIZONTAL. The groups were stacked, which is what forced a scroller: four sections of
rows in a 560px box could only ever show two. Side by side they fill the width instead of
the height, and all 22 roles fit on one screen — which is what Kunal asked for and is also
simply better, because the whole point of this screen is to compare the options.
auto-fit collapses it back to one column on a narrow window with no media query. */
.rolegroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:var(--space-300) var(--space-250);align-items:start}
/* The heading rule is the divider — no boxes, so the rows are the only framed thing. */
.rolegh{margin:0 0 var(--space-100);padding-bottom:var(--space-050);
font-family:var(--font-data);font-size:var(--text-3xs);font-weight:var(--weight-semibold);
letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-secondary);
border-bottom:1px solid var(--border-subtle)}
.roletiles{display:flex;flex-direction:column;gap:var(--space-025)}
/* A ROW. Fixed height so no wrapped label can make one taller than its neighbour, and the
whole row is the target. The native checkbox is replaced by a tick for the same reason as
the onboarding choices: at 13px it renders as a different shape in every browser. It stays
in the DOM, focusable, and carries name="roles" on the wizard where it posts itself. */
.roletile{position:relative;display:flex;align-items:center;gap:var(--space-150);
height:38px;padding:0 var(--space-150) 0 var(--space-100);
border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;
cursor:pointer;min-width:0;
transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.roletile:hover{background:var(--bg-hover)}
.roletile:focus-within{border-color:var(--accent);box-shadow:var(--focus-ring)}
.roletile input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
/* The tick, drawn as an empty box until chosen so every row shows where the answer lands. */
.roletile::before{content:"";flex:0 0 auto;width:17px;height:17px;border-radius:var(--radius-xs);
border:1px solid var(--border-strong);background:transparent;
transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.roletile.on,.roletile:has(input:checked){background:var(--accent-bg);border-color:var(--border-default)}
.roletile.on::before,.roletile:has(input:checked)::before{
background:var(--accent) var(--tick-mark) center/11px no-repeat;border-color:var(--accent)}
.roletile-b{display:flex;align-items:baseline;gap:var(--space-150);flex:1;min-width:0}
.rolelab{flex:1;min-width:0;font-size:var(--text-sm);line-height:1.3;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roletile.on .rolelab{font-weight:var(--weight-semibold)}
/* Right-aligned and tabular so the counts read down the column as a comparison. */
.rolen{flex:0 0 auto;font-family:var(--font-data);font-size:var(--text-2xs);
font-variant-numeric:tabular-nums;color:var(--text-secondary)}
/* A family with nothing live is shown, not hidden — "0" is the useful answer, and dropping
it silently would leave someone wondering why their role is missing. */
.roletile.empty{opacity:.55}
/* Past the cap the unticked rows go quiet rather than vanishing, so the limit reads as a
state instead of options mysteriously disappearing. */
.rolepick.full .roletile:not(.on){opacity:.35}
.rolepick.full .roletile:not(.on):hover{background:transparent;cursor:not-allowed}
.rolenone,.rolehint{margin:0;font-size:var(--text-xs);color:var(--muted)}
/* Where :has() is unavailable the row cannot track its own checkbox, so the native control
comes back rather than leaving a box that never visibly responds. */
@supports not selector(:has(*)){
.roletile::before{display:none}
.roletile input{position:static;opacity:1;width:auto;height:auto;pointer-events:auto;
accent-color:var(--accent)}
}
/* No inner scroller anywhere. It exists to be read in one go; if the window is genuinely
too short the modal overlay already scrolls, which is one scrollbar instead of two. */
.rolepick-page{max-width:none}
#rolemodal .modal{max-width:1040px}
/* The feed's trigger: reads as the current selection, not as a button labelled "Roles". */
.rolebtn{display:flex;width:100%;gap:var(--space-100);align-items:center;text-align:left;padding:9px 11px;
border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);
color:var(--ink);font-size:var(--text-sm);font-family:inherit;cursor:pointer}
.rolebtn:hover{border-color:var(--border-strong);background:var(--bg-hover)}
.rolebtn .rolebtn-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rolebtn .count-pill{flex:0 0 auto}
.rolebtn.fset{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
/* ==================================================================
PAGE COMPONENTS lifted out of template