may only contain dt/dd (or a div
wrapping those), and a alongside them is a WCAG 1.3.1 failure that axe catches
as `only-dlitems`. Nesting it means inheriting the dd's 700-weight card type, so
everything it needs is reset here rather than assumed. */
margin: var(--s-4) 0 0;
font-size: var(--fs-small);
font-weight: 400;
line-height: var(--lh-small);
letter-spacing: 0;
color: var(--ink-faint-text);
}
.chart-wrap {
margin: var(--s-16) 0;
overflow-x: auto;
/* Same reason as .scroller: this box scrolls sideways, so it has to be the containing
block for anything positioned inside it - otherwise an absolutely positioned label
escapes the clip and widens the whole document. */
position: relative;
}
.chart {
display: block;
width: 100%;
/* Fixed height so nothing reflows when the page paints. */
height: 200px;
min-width: 520px;
}
.chart-grid { stroke: var(--rule); stroke-width: 1; }
.chart-axis { stroke: var(--ink-faint); stroke-width: 1; }
.chart-tick {
fill: var(--ink-faint-text);
font-family: var(--font-mono);
font-size: 10px;
text-anchor: end;
}
/* The band is the plot's own background, not a finding, so it takes the neutral
interactive wash rather than a severity hue. */
.chart-band { fill: var(--blue-tint); }
/* A month inside its expected range is the ordinary case, so it stays ink - the
bars are data, and data is not decorated. */
.chart-bar { fill: var(--ink); }
/* A month above the band. --sev-2 (#f2a63b) against a --mist band measures about
1.8:1, which is under the 3:1 WCAG 2.2 SC 1.4.11 wants for a graphic that
carries meaning - so the fill alone would not be a legitimate signal. The
stroke in --sev-2-text (#8a5a05) is what makes it one. The bar is also never
the only carrier: the table beside the chart says "Above expected (n–m)" in
words for the same month. */
.chart-bar-high {
fill: var(--sev-2);
stroke: var(--sev-2-text);
stroke-width: 1;
}
/* A month with no baseline behind it: hatched rather than filled, so it cannot be
mistaken for a measured comparison - and so the distinction survives a
greyscale print, where a pale fill and a pale band look identical. */
.chart-bar-unknown { stroke: var(--rule); stroke-width: 1; }
.chart-hatch-line { stroke: var(--ink-faint); stroke-width: 1; }
.spark {
display: block;
width: 84px;
height: 22px;
overflow: visible;
}
.spark-line {
fill: none;
stroke: var(--ink-soft);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
/* The last point, marked so the eye knows which end is now. The brand accent,
not a severity hue - a trend's latest value is not a grade. */
.spark-dot { fill: var(--signal); }
.meter {
display: block;
width: 72px;
height: 8px;
}
.meter-track { fill: var(--mist); }
.meter-fill { fill: var(--signal); }
/* A second line inside a table cell: the device name under a code, the sample size
under a trend. Keeps the cell scannable without a second column. */
.cell-sub {
display: block;
margin-top: 2px;
font-size: var(--fs-small);
line-height: 1.35;
color: var(--ink-faint-text);
}
/* A link on the sub-line is a short label - "Predicate check", "FDA record" - and it
sits under a record id that is itself unbreakable, so the column is sized by the id
and the label wraps to two lines inside it. Keeping it whole widens the column by a
few characters and is what stops the first column of every record table reading as
"Predicate / check". The table scrolls inside its own box if that costs width. */
.cell-sub a {
white-space: nowrap;
}
/* Direction always carries a word as well as an arrow.
"Faster" takes the brand accent because it is good news about a queue. "Slower"
deliberately does NOT take red: FDA taking longer to clear a submission is a
fact about a queue, not a severity, and a red arrow here would compete for
attention with a Class I recall two rows down. Ink plus the word plus the arrow
is enough. */
.trend-slower { color: var(--ink); font-weight: 600; }
.trend-faster { color: var(--signal-text); font-weight: 600; }
.trend-flat { color: var(--ink-faint-text); }
/* ================================================================= the chain
The predicate chain diagram. Its twin is
apps/web/src/components/PredicateChain.module.css, and the two must match:
the same ancestry appears on the public code page and on this one.
------------------------------------------------------------------------ */
.chain-figure { margin: 0 0 var(--s-16); }
.chain-caption {
margin: 0 0 var(--s-12);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--ink-faint-text);
}
/* Scrolls sideways on a narrow viewport. tabindex and role="group" are in the
markup, because a region that scrolls with a mouse and not a keyboard is the
axe failure scrollable-region-focusable. */
.chain-scroll {
overflow-x: auto;
padding-bottom: var(--s-8);
}
/*
* A long chain scrolls inside its own box instead of pushing the page down.
*
* Eighteen generations stacked is about 3,000px of diagram - JOW, and real chains reach
* back to 1976 - which puts every section under it three screens away. The picture is
* still drawn in full and nothing is truncated; it is the viewport onto it that is
* bounded, and the indented outline underneath is the copy a reader actually reads.
*
* The wrapper already carries tabindex="0" and role="group" with a name, so a region that
* now scrolls on two axes is still reachable from a keyboard - which is the axe failure
* scrollable-region-focusable, and the reason those attributes were put there for the
* horizontal case.
*
* :has() rather than a class on the wrapper: the flag belongs to the svg, which is where
* layoutChain puts it. An engine without :has() simply gets the tall version, which is
* what it renders today - a degradation, not a break.
*/
.chain-scroll:has(.chain-diagram-stacked) {
max-height: 30rem;
overflow-y: auto;
/* And no wider than the column it holds - a 260px diagram inside a 1,000px box reads as
a panel that failed to load its right-hand side. */
width: fit-content;
max-width: 100%;
}
.chain-diagram { display: block; height: auto; min-width: 100%; }
/*
* A chain drawn as a column keeps its natural width.
*
* The rule above fills the container, which is what a row of four boxes wants. A column is
* 132 units wide and as tall as the chain, so filling a 1,000px container scales it by
* seven and a half in both directions - JOW's eighteen generations came out around twelve
* thousand pixels tall. 132 units at the diagram's own scale is about 260px, which is the
* width the boxes were drawn to be read at.
*
* `min-width: 0` is not redundant: it is what overrides the 100% above, which would
* otherwise win over max-width and re-stretch it.
*/
.chain-diagram-stacked {
min-width: 0;
width: 260px;
max-width: 100%;
}
.chain-box { fill: var(--paper); stroke: var(--rule); stroke-width: 1; }
/* A recalled ancestor: hue, heavier stroke, the class in words inside the box,
and the same class again in the list below. Four carriers, because this is the
one mark on the page a reader must not miss. */
.chain-box-recalled {
fill: var(--sev-1-wash);
stroke: var(--sev-1);
stroke-width: 2;
}
/* 1976 is a boundary, not a device - dashed, because there is no further ancestor
to find rather than one we failed to read. */
.chain-box-terminal { fill: var(--mist); stroke-dasharray: 4 3; }
.chain-k {
font-family: var(--font-mono);
font-size: 15px;
font-weight: 500;
fill: var(--ink);
}
.chain-node-sev { font-size: 12px; font-weight: 600; fill: var(--sev-1-text); }
.chain-node-detail { font-size: 12px; fill: var(--ink-faint-text); }
.chain-connector { stroke: var(--ink-faint); stroke-width: 1.5; }
.chain-arrowhead {
fill: none;
stroke: var(--ink-faint);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Visually hidden, but never display:none - it is the accessible copy of the
diagram and the printed one. clip-path rather than a transform, because the
reduced-motion block in base.css sets `transform: none !important`. */
.chain-list {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
margin: 0;
padding: 0;
}
@media print {
.chain-scroll { display: none; }
.chain-list {
position: static;
width: auto;
height: auto;
clip-path: none;
white-space: normal;
}
.chain-list li { display: block; margin-bottom: 2mm; }
}
/* ==================================================================== auth
The sign-in, sign-up and code screens.
These three pages are the only ones in the app whose content is shorter than the
viewport, and the ordinary layout served them badly for exactly that reason: the
shared `.container` is 1200px and the form panel was `.narrow` at 480px, so a 480px
form sat hard against the left edge of a mostly empty page, with the heading pinned
to the top by `main`'s fixed top padding. Nothing was broken and it read as though
something was - which is a poor first impression on the two pages where a stranger
forms one.
So the auth pages get their own shell: one column, centred horizontally, and
vertically balanced in whatever height is left between the header and the footer.
The markup is unchanged - same fields, same handler, same no-JavaScript form.
------------------------------------------------------------------------ */
/* `justify-content` rather than `margin: auto`, so the column stays put when the
content grows past the viewport - an error message and a hint can push the code
screen taller than a short laptop window, and a centred block that overflows loses
its top edge behind the header where it cannot be scrolled back to. */
.auth-page > main {
display: flex;
flex-direction: column;
justify-content: center;
padding-block: var(--s-48);
}
.auth-shell {
width: 100%;
/* The measure for the whole screen: heading, lead and panel all set to this, so the
three read as one column rather than three widths stacked. Wide enough that the
field hint sets in four lines rather than six, narrow enough to stay a form. */
max-width: 28rem;
margin-inline: auto;
padding-inline: var(--gutter);
}
/* Centred, and the only place in the app where a heading is. A single form with no
siblings has no left edge to align to, and centring it puts the heading, the field
and the button on one axis the eye can follow straight down. */
.auth-head {
display: block;
text-align: center;
margin-bottom: var(--s-24);
}
.auth-head .page-head-text {
max-width: none;
}
.auth-head .lead {
/* `.lead` caps at 62ch, which is far wider than this column. Released to the shell's
own width instead, so the sentence breaks on the same margin as the panel under it
rather than on a narrower one of its own. */
max-width: none;
font-size: var(--fs-body-lg);
}
.auth-panel {
padding: var(--s-32);
}
/* The field is capped at 26rem for forms that sit in a wide page. Here the panel is
already the measure, so the cap only introduces a gap on its right. */
.auth-panel .field {
max-width: none;
margin-bottom: var(--s-24);
}
/* Full width, because it is the only action and a button narrower than the field it
submits reads as secondary. */
.auth-panel > .button {
width: 100%;
justify-content: center;
}
/* The code screen has two: submit, and "use a different email" under it. */
.auth-panel .actions {
display: flex;
flex-direction: column;
gap: var(--s-12);
align-items: stretch;
text-align: center;
}
/* The "already have an account?" line under the panel. */
.auth-page .small {
margin-top: var(--s-16);
text-align: center;
}
/* Below this the vertical centring is worth less than the space it spends: on a short
phone in landscape a centred column can leave the button under the fold. */
@media (max-width: 30rem) {
.auth-page > main {
justify-content: flex-start;
padding-block: var(--s-32);
}
.auth-panel {
padding: var(--s-24);
}
}
/* ---------------------------------------------------------------------------
The launch offer.
Deliberately blue rather than amber or red. Those two are severity in this
product - an amber wash means a device risk level, and it is used that way on
every code page - so dressing a promotion in one would make a discount look
like a recall. Blue is already the informational accent (.band-current, the
focus ring), which is what this is.
--------------------------------------------------------------------------- */
/*
A solid blue bar with white text, fixed to the top of the viewport.
Blue rather than amber or red: those are severity in this product - an amber wash is an
FDA risk level on every code page - so a promotion in one would read as a recall, which
is the single misreading this product cannot afford.
White on --blue (#2f6bfe) measures 4.51:1, clearing AA for body text. That is why
nothing below is a faded white: dropping the terms line to 70% would take it to about
3.2:1 and fail. Hierarchy comes from size and weight instead.
*/
.promo-banner {
position: fixed;
inset-inline: 0;
top: 0;
z-index: 100;
padding: var(--s-8) var(--s-16);
background: var(--blue);
color: var(--on-ink);
text-align: center;
}
.promo-line {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: var(--s-8);
}
.promo-flag { font-size: var(--fs-lead); line-height: 1; }
.promo-flag-text {
font-size: var(--fs-small);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* The number is the message, so it is the largest thing in the bar. */
.promo-head {
font-size: var(--fs-h3);
font-weight: 700;
letter-spacing: -0.01em;
}
.promo-scope { font-size: var(--fs-small); }
.promo-ends {
font-size: var(--fs-small);
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* Tabular figures, so a ticking clock cannot reflow a wrapping flex row every second. */
.promo-clock {
font-size: var(--fs-lead);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* Reversed out of the bar - the only element that looks pressable. */
.promo-cta {
display: inline-block;
padding: var(--s-4) var(--s-16);
border-radius: var(--radius-pill);
background: var(--on-ink);
color: var(--blue-text);
font-size: var(--fs-small);
font-weight: 700;
text-decoration: none;
white-space: nowrap;
}
.promo-cta:hover { background: var(--blue-tint); }
/* Present, and quiet. Full white rather than faded, for the contrast reason above. */
.promo-terms {
margin: var(--s-4) 0 0;
font-size: var(--fs-small);
}
/* The bar is out of flow, so the page has to be told it exists. --promo-h is published by
app.js from the rendered height; with no offer running it is absent and this is zero. */
body {
padding-top: var(--promo-h, 0);
}
/* The app's own sticky header, pushed below the bar for the same reason. */
.chrome {
top: var(--promo-h, 0);
}
.plan-promo-line {
color: var(--blue-text);
}
/* ===========================================================================
The upsell bar.
Pinned to the bottom edge, not thrown over the page as a dialog. Every screen
it appears on is a screen somebody came here to read - a search result, a code
page - and a modal over the work is a bounce. A strip at the bottom leaves the
table visible and can be scrolled past.
Bottom rather than top because the promo banner already owns the top edge and
a page with a fixed strip on both ends is a letterbox.
========================================================================= */
.upsell {
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 90;
padding: var(--s-12) var(--s-16);
padding-bottom: calc(var(--s-12) + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--rule);
background: var(--paper);
box-shadow: var(--shadow-md);
}
.upsell-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-12);
max-width: var(--max-w);
margin-inline: auto;
}
.upsell-text {
flex: 1 1 260px;
margin: 0;
font-size: var(--fs-small);
line-height: var(--lh-small);
}
.upsell-found {
color: var(--ink);
font-weight: 700;
}
.upsell-sub {
display: block;
color: var(--ink-faint-text);
}
.upsell-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-12);
}
/* The free action is filled and the paid one is a link, in that order. Watching a
code is the Value Moment and costs the reader nothing; somebody who has never
seen a digest arrive is not the person to sell a subscription to. */
.upsell-primary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--tap-min);
padding-inline: var(--s-24);
border: 0;
border-radius: var(--radius);
background: var(--blue);
color: var(--paper);
font-family: inherit;
font-size: var(--fs-nav);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.upsell-primary:hover {
background: var(--blue-hover);
}
.upsell-secondary {
display: inline-flex;
align-items: center;
min-height: var(--tap-min);
font-size: var(--fs-small);
font-weight: 600;
color: var(--blue-text);
white-space: nowrap;
}
/* The material term of the offer, in the same bar as the offer. An introductory
price that hides what it renews at is a misleading omission under the UK CPRs
and the EU UCPD, both of which reach this product because Paddle sells into
them as Merchant of Record. */
.upsell-terms {
flex: 1 1 100%;
margin: 0;
font-size: var(--fs-legal);
line-height: var(--lh-small);
color: var(--ink-faint-text);
}
/* Room for the bar, reserved in flow and only when the bar is there. Generous
rather than exact: the bar wraps to three rows at 360px, where the terms line
and the actions each take one of their own. */
.upsell-spacer {
height: 150px;
}
/* A row-level button: the Watch control in the search results table. Short enough
not to widen a column that already scrolls sideways on a phone. */
.button-small {
min-height: 36px;
padding: var(--s-4) var(--s-12);
font-size: var(--fs-small);
white-space: nowrap;
}
/* Already on the list. Stated in words, never as a tick alone - the column is
otherwise all buttons, and a reader scanning it has to be able to tell an action
from a state. */
.cell-action {
white-space: nowrap;
}
.cell-watching {
font-size: var(--fs-small);
font-weight: 600;
color: var(--signal-text);
}
/* The payback sum, under the price on the plans screen. Ink and 500, so it reads
as an argument rather than as the caption the muted `.small` around it is. */
.plan-payback {
display: inline-block;
margin-top: var(--s-8);
color: var(--ink);
font-weight: 600;
}
/* ------------------------------------------------------------------ watch lead
*
* The watch invitation, which is now the most prominent thing on a search result,
* a company page and a code page. See `watchLead` in layout.ts for why it is one
* component rather than three.
*
* It reads as a panel rather than as a banner: the accent edge is the same device
* the findings use, so a reader already knows the shape means "this is the thing
* on this screen". Blue rather than a severity hue, for the same reason
* .panel-invite is - severity colours in this product mean FDA records, and an
* offer is not a finding.
*
* Flex with wrap rather than a grid, so the button drops under the text at narrow
* widths instead of squeezing the sentence into a column two words wide. The
* button keeps `white-space: nowrap` because "Watch GEI" broken across two lines
* is the least confident possible rendering of the one action this page wants.
*/
.watch-lead {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s-16) var(--s-24);
margin-bottom: var(--s-24);
padding: var(--s-24);
border: 1px solid var(--blue);
border-left: 4px solid var(--blue);
border-radius: 0 var(--radius) var(--radius) 0;
background: var(--blue-tint);
box-shadow: var(--shadow-sm);
}
/* Enough to keep the sentence on a reading measure, and enough to make it give way
before the button does. */
.watch-lead-text {
flex: 1 1 22rem;
min-width: 0;
}
.watch-lead-title {
margin: 0 0 var(--s-4);
font-size: var(--fs-h3);
font-weight: 700;
line-height: var(--lh-h3);
color: var(--ink);
}
.watch-lead-sub {
margin: 0;
font-size: var(--fs-small);
line-height: var(--lh-small);
color: var(--ink-soft);
}
.watch-lead-device {
font-weight: 600;
color: var(--ink);
}
.watch-lead-action {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--s-8);
/*
* Shrinkable, and min-width:0 so it actually can.
*
* This was flex: 0 0 auto, which means the column is laid out at the max-content
* width of its widest child - so the sentence under the button never wrapped, at any
* viewport, and simply widened the document instead. It fit at 390px only because the
* line happened to be short; lengthening it by a dozen characters pushed /code/:code
* and the search results to 406px in a 390px viewport, which check-layout.mjs caught.
* A flex item's default min-width is auto, so the min-width:0 is the half that does
* the work - without it the item refuses to shrink below max-content whatever the
* flex-basis says. .watch-lead-text beside it has had both from the start.
*/
flex: 0 1 auto;
min-width: 0;
}
/* Taller and wider than the standard button, which is the whole point: this is the
one control on the page that has to win against a table of links. */
.button-lead {
min-height: 48px;
padding-inline: var(--s-32);
font-size: var(--fs-body);
white-space: nowrap;
}
/* The three facts that answer the reasons somebody does not click: what it costs,
what it needs, and how to undo it. */
.watch-lead-free {
font-size: var(--fs-legal);
line-height: var(--lh-small);
color: var(--ink-faint-text);
}
/* Already watching. Not an offer any more, so it loses the fill and the accent edge
and becomes a statement - a panel still shouting an action the reader has taken is
a panel that has stopped reading the account. */
.watch-lead-on {
border-color: var(--rule);
border-left-color: var(--signal);
background: var(--paper);
}
.watch-lead-state {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-8);
margin: 0 0 var(--s-4);
font-size: var(--fs-body);
color: var(--ink);
}
/* Optional on the form, because "we already know your account" is the argument the
support form makes and this one borrows it. */
.field-optional {
font-weight: 400;
color: var(--ink-faint-text);
}
/* ---------------------------------------------------------------------------
* Getting started
*
* The first-run checklist, the answer to a first watch, and the empty dashboard
* that precedes both. Three components, one feature - see
* apps/app/src/onboarding.ts for what each of them is for.
*
* All three are blue or neutral and never a severity hue. The rule the whole
* product runs on is that red and amber mean how serious an FDA record is, and a
* teal tick on a checklist would be the second meaning that unteaches the first.
* ------------------------------------------------------------------------- */
/* The two glyph paints, as classes rather than attributes.
*
* A knockout tick needs a white stroke and no colour may be written in a source
* file - check-tokens.mjs fails the build on a hex outside the token file - and
* a presentation attribute cannot read a custom property dependably. So the
* shapes are markup and the paint is here, which is also what lets the disc take
* its colour from whatever is around it. */
.glyph-disc { fill: currentColor; }
.glyph-knockout {
fill: none;
stroke: var(--paper);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.glyph-open {
fill: none;
stroke: currentColor;
stroke-width: 1.5;
}
.onboard {
border-color: var(--rule);
background: var(--mist);
}
/* The heading and the dismiss button on one line, and the button gives way first
at narrow widths - a "Hide this" wrapping under a two-word heading is the least
important control on the panel taking a row of its own. */
.onboard-head {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: var(--s-8) var(--s-16);
margin-bottom: var(--s-16);
}
.onboard-progress {
margin: var(--s-4) 0 0;
font-size: var(--fs-small);
line-height: var(--lh-small);
color: var(--ink-faint-text);
}
.onboard-dismiss { margin: 0; }
/* An ordered list with its numbers suppressed: the order is real - each step is
easier once the one above it is done - and the marker would be a second counter
next to the ticks. */
.onboard-list {
margin: 0;
padding: 0;
list-style: none;
}
.onboard-step {
display: flex;
align-items: flex-start;
gap: var(--s-12);
padding: var(--s-12) 0;
border-top: 1px solid var(--rule);
color: var(--ink-faint);
}
.onboard-step:first-child { border-top: 0; padding-top: 0; }
/* Done, and the glyph is the only thing that changes colour. The text stays at
full contrast rather than fading: a completed step is still something the
reader may want to read, and greying it out is how a checklist becomes four
lines nobody can make out. */
.onboard-step-done { color: var(--blue); }
.onboard-glyph {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin-top: 2px;
}
.onboard-step-text { min-width: 0; }
.onboard-step-title {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-8);
margin: 0 0 var(--s-4);
font-size: var(--fs-body-compact);
font-weight: 600;
color: var(--ink);
}
.onboard-step-body {
margin: 0;
font-size: var(--fs-small);
line-height: var(--lh-small);
color: var(--ink-soft);
}
/* ------------------------------------------------------------ the first watch
*
* What a reader sees the instant they have done the one thing this funnel is
* measured against. Louder than a notice and quieter than a finding: a filled
* disc, a heading, and the sentence that says what will now arrive. */
.win {
display: flex;
align-items: flex-start;
gap: var(--s-16);
padding: var(--s-24);
border: 1px solid var(--blue);
border-left: 4px solid var(--blue);
border-radius: 0 var(--radius) var(--radius) 0;
background: var(--blue-tint);
box-shadow: var(--shadow-sm);
}
.win-mark {
flex: 0 0 auto;
margin: 0;
color: var(--blue);
}
.win-glyph {
display: block;
width: 28px;
height: 28px;
}
.win-text { min-width: 0; }
.win-title {
margin: 0 0 var(--s-8);
font-size: var(--fs-h3);
font-weight: 700;
line-height: var(--lh-h3);
color: var(--ink);
}
.win-body {
margin: 0;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--ink-soft);
}
/* The upgrade, on the same line as the question it answers and wrapping under it
on a phone. A question with its answer three lines below is two separate asks. */
.win-more {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-12);
margin: var(--s-16) 0 0;
}
.win-ask {
font-size: var(--fs-body);
font-weight: 600;
color: var(--ink);
}
/* ------------------------------------------------------- the empty dashboard
*
* Not a dashed box. On the one screen where the product has nothing to show, the
* single click that starts it working is the page. */
.first-run {
padding: var(--s-48) var(--s-24);
border: 1px solid var(--rule);
border-radius: var(--radius);
background: var(--paper);
box-shadow: var(--shadow-sm);
text-align: center;
}
.first-run-eyebrow {
margin: 0 0 var(--s-8);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--ink-faint-text);
}
.first-run-title {
margin: 0 0 var(--s-16);
font-size: var(--fs-h3);
font-weight: 700;
line-height: var(--lh-h3);
color: var(--ink);
}
.first-run-body {
margin: 0 auto var(--s-24);
max-width: 38rem;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--ink-soft);
}
.first-run-action { margin: 0 0 var(--s-16); }
.first-run-alt {
margin: 0 auto;
max-width: 38rem;
font-size: var(--fs-small);
line-height: var(--lh-small);
color: var(--ink-faint-text);
}
/* ====================================================== the risk score gauge
The Predicate Risk Score (packages/core/src/predicaterisk.ts), drawn by
riskGauge in charts.ts.
The band word carries the meaning and the fill reinforces it, never the other
way round - the same rule .sev holds to, and for the same three readers: a
greyscale print, a forced-colours client, and a red-green colour deficiency.
Every band therefore has a label with its own weight, and the meter is
aria-labelled with the number AND the word.
------------------------------------------------------------------------ */
.risk {
margin: 0 0 var(--s-16);
padding: var(--s-16);
border: 1px solid var(--rule);
border-radius: var(--radius);
background: var(--mist);
}
/* The eyebrow's default bottom margin is 16px, which is a gap between a label and the
number it labels rather than a join. */
.risk-label { margin-bottom: var(--s-8); }
.risk-head {
display: flex;
flex-wrap: wrap;
gap: var(--s-16);
align-items: center;
margin-bottom: var(--s-12);
}
.risk-figure {
display: flex;
align-items: baseline;
gap: var(--s-8);
margin: 0;
}
.risk-number {
font-family: var(--font-mono);
font-size: var(--fs-h2);
line-height: 1;
color: var(--ink);
}
.risk-of {
font-size: var(--fs-small);
color: var(--ink-faint-text);
}
/* Grows to fill the row so the meter is a usable length at every width, and
wraps under the number rather than shrinking to a stub on a phone. */
.risk-band {
flex: 1 1 12rem;
min-width: 10rem;
}
.risk-band-label {
margin: 0 0 var(--s-8);
font-size: var(--fs-eyebrow);
font-weight: 700;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
}
/* Four bands, four weights of the same message. "None found" is deliberately
the brand accent rather than a severity hue: the absence of a recall is good
news about a record, not a grade on a device. */
.risk-band-high { color: var(--sev-1-text); }
.risk-band-elevated { color: var(--sev-2-text); }
.risk-band-low { color: var(--ink); }
.risk-band-none-found { color: var(--signal-text); }
.risk-band-not-known { color: var(--ink-faint-text); }
.risk-meter {
display: block;
width: 100%;
height: 8px;
}
.risk-track { fill: var(--paper); stroke: var(--rule); }
.risk-fill-high { fill: var(--sev-1); }
.risk-fill-elevated { fill: var(--sev-2); }
.risk-fill-low { fill: var(--ink-faint); }
.risk-fill-none-found { fill: var(--signal); }
.risk-fill-not-known { fill: var(--rule); }
/* The working, collapsed by default.
Open by default was tried and is wrong here: the arithmetic is six lines of
record ids, and a reader who has not yet decided whether they care about the
number should not have to scroll past its derivation to reach the recalls it
was derived from. A is the honest control - it needs no script, it
prints open in browsers that expand them, and it is keyboard-operable for
free. */
.risk-working {
margin-top: var(--s-12);
font-size: var(--fs-small);
}
.risk-working summary {
cursor: pointer;
font-weight: 600;
color: var(--blue-text);
}
.risk-parts {
margin: var(--s-12) 0 0;
padding: 0;
list-style: none;
}
.risk-parts li {
display: flex;
gap: var(--s-12);
padding: var(--s-8) 0;
border-top: 1px solid var(--rule);
line-height: var(--lh-small);
color: var(--ink-soft);
}
.risk-part-points {
flex: 0 0 3rem;
font-family: var(--font-mono);
font-weight: 600;
text-align: right;
color: var(--ink);
}
.risk-part-total {
font-weight: 600;
color: var(--ink);
}
/* ================================================= the chain, as a read list
chainOutline in charts.ts. The diagram above it is the picture; this is the
thing a reader actually reads, and the indentation is the information.
------------------------------------------------------------------------ */
.chain-outline {
margin: 0 0 var(--s-16);
padding: 0;
list-style: none;
}
.chain-step {
padding: var(--s-12) var(--s-12) var(--s-12) var(--s-16);
border-left: 3px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
/* Indentation by generation, capped at six steps in the markup. A real chain
reaches fifteen to twenty generations back to 1976, and an unbounded indent
pushes the oldest device - often the recalled one - off the right edge of a
phone. */
.chain-step-1 { margin-left: var(--s-16); }
.chain-step-2 { margin-left: calc(var(--s-16) * 2); }
.chain-step-3 { margin-left: calc(var(--s-16) * 3); }
.chain-step-4 { margin-left: calc(var(--s-16) * 4); }
.chain-step-5 { margin-left: calc(var(--s-16) * 5); }
.chain-step-6 { margin-left: calc(var(--s-16) * 6); }
/* At phone width the indent is the first thing to go. Six levels of 16px is
96px of a 375px screen spent on hierarchy the border already carries. */
@media (max-width: 40rem) {
.chain-step-1,
.chain-step-2,
.chain-step-3,
.chain-step-4,
.chain-step-5,
.chain-step-6 {
margin-left: var(--s-8);
}
}
.chain-step-recalled {
border-left-color: var(--sev-1);
background: var(--sev-1-wash);
}
.chain-step-head {
display: flex;
flex-wrap: wrap;
gap: var(--s-8);
align-items: center;
margin: 0 0 4px;
}
.chain-step-k { font-weight: 600; color: var(--ink); }
.chain-step-depth {
font-size: var(--fs-small);
color: var(--ink-faint-text);
}
.chain-step-detail {
margin: 0;
font-size: var(--fs-small);
line-height: var(--lh-small);
color: var(--ink-soft);
}
.chain-step-recalls {
margin: var(--s-8) 0 0;
padding: 0 0 0 var(--s-16);
list-style: none;
font-size: var(--fs-small);
color: var(--sev-1-text);
}
.chain-step-recalls li { padding: 2px 0; }
/* An amber pill for "this code is running above its own baseline". It IS a
severity statement about an FDA record, so it takes a severity token rather
than the neutral .band greys it inherits from. */
.band-alert {
color: var(--sev-2-text);
background: var(--sev-2-wash);
border-color: var(--sev-2);
}
/* ------------------------------------------------- the chain device switcher
Plain links, not a select and not tabs. Switching which device's chain is
drawn is navigation: it reloads the page, so it must be back-buttonable and
linkable, and it has to work with JavaScript off on a managed browser.
aria-current marks the one being shown. Not aria-pressed - that is only valid
on something with a button role, and axe reports it on a link as
aria-allowed-attr, critical.
------------------------------------------------------------------------ */
.chain-switch {
display: flex;
flex-wrap: wrap;
gap: var(--s-8);
margin: 0 0 var(--s-16);
}
.chain-switch-link {
padding: 4px var(--s-12);
border: 1px solid var(--rule);
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: var(--fs-small);
text-decoration: none;
color: var(--ink-soft);
background: var(--paper);
}
.chain-switch-link:hover { border-color: var(--blue); color: var(--blue-text); }
.chain-switch-link[aria-current] {
border-color: var(--ink);
font-weight: 600;
color: var(--ink);
background: var(--mist);
}
/* ================================================= the watch list, organised
The watch list stopped being a table when it grew a note field and a group.
A table was right when every row was three dates and a Remove button. It is
wrong now: each row carries two inputs and a note that runs to a sentence, and
a table cell containing a form either stretches the column to the width of the
longest note or clips it. A list of cards holds a variable-height row without
the other rows having to agree to it.
------------------------------------------------------------------------ */
.watch-group { margin: var(--s-24) 0 0; }
.watch-group-head {
display: flex;
flex-wrap: wrap;
gap: var(--s-12);
align-items: baseline;
margin: 0 0 var(--s-12);
padding-bottom: var(--s-8);
border-bottom: 1px solid var(--rule);
}
.watch-group-count {
font-size: var(--fs-small);
font-weight: 400;
color: var(--ink-faint-text);
}
.watch-list {
margin: 0;
padding: 0;
list-style: none;
}
.watch-row {
padding: var(--s-12) 0;
border-bottom: 1px solid var(--rule);
}
.watch-row-head {
display: flex;
flex-wrap: wrap;
gap: var(--s-12);
align-items: baseline;
}
.watch-row-code { font-size: var(--fs-card-title); font-weight: 600; }
/* Pushes Remove to the right edge on a wide row and lets it wrap under on a
phone, without a second flex container or a media query. */
.watch-row-dates {
flex: 1 1 auto;
font-size: var(--fs-small);
color: var(--ink-faint-text);
}
/* The link out to FDA's classification record, inside the meta line.
Inherits the faint size of the line it sits in, so it reads as part of the
sentence rather than as a button competing with Remove at the other end. */
.watch-row-source {
color: var(--ink-soft);
text-decoration: underline dotted var(--ink-faint);
text-underline-offset: 3px;
}
.watch-row-source:hover,
.watch-row-source:focus-visible {
color: var(--blue-text);
text-decoration: underline solid var(--blue-text);
}
.watch-row-remove { flex: 0 0 auto; }
.watch-annotate {
display: flex;
flex-wrap: wrap;
gap: var(--s-12);
align-items: flex-end;
margin-top: var(--s-8);
}
/* The note is the one that should take the leftover width: a group is a client
name and a note is a sentence. */
.watch-annotate-group { flex: 1 1 12rem; margin: 0; }
.watch-annotate-note { flex: 3 1 18rem; margin: 0; }
.watch-annotate .field label {
font-size: var(--fs-small);
color: var(--ink-faint-text);
}
/* ---------------------------------------------------- comparing two codes
Two fields side by side above the table, stacking on a phone. Everything
below them is an ordinary .table inside a .scroller - a comparison is a
table, and dressing it as anything else would cost the row headings a screen
reader announces.
------------------------------------------------------------------------ */
.compare-fields {
display: flex;
flex-wrap: wrap;
gap: var(--s-16);
}
.compare-fields .field { flex: 1 1 10rem; }
/* The measure column is the one that should hold its width: its cells carry a
label and a line of record links, and letting it collapse puts "Recalls not
yet terminated" on four lines beside two short numbers. */
.compare-table th[scope="row"] { min-width: 14rem; }
/* ===========================================================================
The signed-in workspace: density, and the finish on shared pieces.
The app used to inherit the marketing site's type scale outright - a 40px page title,
21px lead and 17px body - which is right for a page read once and wrong for a tool read
every morning with a table in it: a four-column KPI row and a twelve-row recall table
could not share a screen. Inside the signed-in shell the same variables are re-pointed
at the app steps in tokens.css, so every component that already reads --fs-body or
--fs-h3 tightens with no per-component rule, and the signed-out pages, the marketing
site and the client-ready report are untouched.
Inputs stay at 16px below 768px, where iOS would otherwise zoom on focus.
=========================================================================== */
body.shell {
--fs-h2: var(--fs-app-title);
--lh-h2: 1.2;
--ls-h2: -0.022em;
--fs-h3: var(--fs-app-section);
--lh-h3: 1.35;
--fs-card-title: var(--fs-app-card);
--lh-card-title: 1.4;
--fs-lead: var(--fs-app-body);
--lh-lead: 1.55;
--fs-body: var(--fs-app-body);
--lh-body: 1.55;
--fs-body-lg: 16px;
--fs-body-compact: var(--fs-app-table);
--fs-small: var(--fs-app-small);
--lh-small: 1.5;
--fs-eyebrow: 11.5px;
--ls-eyebrow: 0.06em;
--fs-legal: 12px;
--fs-nav: 14px;
--fs-mono: var(--fs-app-mono);
--fs-mono-chip: 12px;
--fs-price: 36px;
--fs-price-old: 20px;
--fs-price-talk: 24px;
--fs-cadence: 15px;
font-size: var(--fs-body);
line-height: var(--lh-body);
}
/* A mouse can hit a 40px target; a finger keeps the 44px floor. */
@media (pointer: fine) {
body.shell { --tap-min: 40px; }
}
@media (max-width: 767px) {
body.shell { --fs-app-title: 22px; --fs-app-kpi: 22px; }
/* Two KPI tiles to a row on a phone rather than four full-width cards: the numbers
are short, and a row of four stacked cards pushed the findings below two screens. */
body.shell .grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s-12);
}
/* An odd tile out takes the whole row rather than sitting half-width on its own. */
body.shell .grid > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
body.shell .stat { padding: var(--s-12); }
body.shell .stat-risk,
body.shell .stat-warn { padding-left: calc(var(--s-12) + 3px); }
body.shell .stat dt { font-size: 11px; letter-spacing: 0.04em; }
body.shell .stat dd.text-body { font-size: 15px; }
body.shell .field input,
body.shell .field textarea,
body.shell .search-input { font-size: 16px; }
}
body.shell > main {
padding-block: 0;
}
/* The page header: title and one line under it, actions on the right edge, and a
hairline-free gap before the content. */
body.shell .page-head {
align-items: flex-end;
gap: var(--s-16) var(--s-24);
margin-bottom: var(--s-24);
}
body.shell .page-head-text { max-width: 72ch; }
body.shell .h1 { margin-bottom: var(--s-4); }
body.shell .lead { max-width: 72ch; color: var(--ink-soft); }
body.shell .page-actions { padding-top: 0; }
body.shell .h2 { margin-bottom: var(--s-12); letter-spacing: -0.01em; }
body.shell .h3 { letter-spacing: -0.005em; }
/* Section rhythm: a heading that opens a new block gets room above it. Scoped to
headings in the page flow - a heading inside a card already has the card's padding. */
body.shell .pane .grid + .h2,
body.shell .pane .panel + .h2,
body.shell .pane .scroller + .h2 { margin-top: var(--s-32); }
/* Pills read in sentence case. Uppercase-plus-tracking was the marketing eyebrow, and
on a dense screen a row of shouting pills is the loudest thing on it whatever they
say. The words, glyphs and hues are unchanged - only the case and the tracking. */
body.shell .band,
body.shell .sev,
body.shell .change-kind,
body.shell .source-tag {
padding: 1px var(--s-8);
font-size: var(--fs-app-label);
font-weight: 600;
letter-spacing: 0;
text-transform: none;
line-height: 1.6;
}
body.shell .sev { gap: 5px; }
/* The neutral pill ("Free", "Optional", "Watching") at the app's 12px measured 4.53:1 in
the faint grey on mist - a pass by 0.03. The body grey takes it to 6.5:1, so a tag stays
legible on a dim laptop screen rather than merely compliant on a good one. */
body.shell .band:not(.band-current):not(.band-alert) { color: var(--ink-soft); }
body.shell .sev-glyph { width: 12px; height: 12px; }
/* The plan count: a quiet meta line rather than a bordered box that looked like a
button. It still turns blue when the plan is full. */
body.shell .watching-line {
display: inline-flex;
align-items: center;
gap: var(--s-8);
margin-bottom: var(--s-16);
padding: 2px var(--s-12);
border-color: var(--rule);
border-radius: var(--radius-pill);
background: var(--paper);
font-size: var(--fs-app-label);
}
body.shell .watching-line::before {
content: "";
width: 6px;
height: 6px;
border-radius: var(--radius-pill);
background: var(--signal);
}
body.shell .watching-line-full { background: var(--blue-tint); border-color: var(--blue-tint); }
body.shell .watching-line-full::before { background: var(--blue); }
/* FDA provenance: still on every screen that reads FDA records, now sized as the
standing footnote it is rather than as the first panel on the page. */
body.shell .integrity {
padding: var(--s-12) var(--s-16) var(--s-12) calc(var(--s-16) + 3px);
border: 1px solid var(--rule);
border-radius: var(--radius);
background: var(--paper);
box-shadow: inset 3px 0 0 var(--ink-faint);
max-width: none;
}
body.shell .integrity-line { font-size: var(--fs-small); color: var(--ink-soft); }
body.shell .integrity-sources { font-size: var(--fs-app-label); line-height: 1.7; }
/* The watch invitation keeps its job as the loudest thing on the screen, with the
rounded card and a single accent edge every other card here uses. */
body.shell .watch-lead {
padding: var(--s-16) var(--s-24) var(--s-16) calc(var(--s-24) + 4px);
border: 1px solid var(--blue);
border-radius: var(--radius-lg);
box-shadow: inset 4px 0 0 var(--blue), var(--shadow-card);
}
/* Already watching: a statement, not an offer, so it keeps the brand-teal edge it has
always had - distinct from the blue invitation - on a plain paper card. */
body.shell .watch-lead-on {
border-color: var(--rule);
background: var(--paper);
box-shadow: inset 4px 0 0 var(--signal), var(--shadow-card);
}
/* One sentence, so it wraps as a sentence: the pill sits inline at its start rather
than every link and full stop becoming its own flex item on a narrow screen. */
body.shell .watch-lead-state { display: block; line-height: 1.7; }
body.shell .watch-lead-state .band { margin-right: var(--s-8); vertical-align: 1px; }
/* Panels on the canvas: a touch more air on a wide screen, the same on a phone. */
body.shell .panel { padding: var(--s-24); }
body.shell .panel-quiet { background: var(--paper); box-shadow: none; border-style: dashed; }
body.shell .panel-invite { box-shadow: var(--shadow-card); }
/* A run of finding cards reads as one list. */
body.shell .finding + .finding { margin-top: var(--s-12); }
/* The footer under a signed-in page is the legal line, not a second masthead: the rail
already carries the mark on this screen, so here it gives way to the work. (The whole
footer is hidden in print - see the print block.) */
body.shell .foot {
padding-block: var(--s-24) var(--s-32);
border-top: 1px solid var(--rule);
background: transparent;
}
body.shell .foot .container { max-width: var(--pane-max); padding-inline: var(--s-32); }
body.shell .foot .legal { font-size: var(--fs-legal); }
body.shell .foot-brand { display: none; }
@media (max-width: 860px) {
body.shell .foot .container { padding-inline: var(--s-16); }
}
/* Visible text selection in the brand family. */
body.shell ::selection { background: var(--blue-tint); color: var(--ink); }
/* ----------------------------------------------------------- button family
Three weights and nothing else: the filled .button is the one next action on a
screen, .button-quiet is a real but secondary action, and .button-ghost is the
quietest - a link-like control that still has a button's target size, used for
destructive or navigational actions that must never be the thing a hurried click
lands on. */
.button-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-8);
min-height: var(--tap-min);
padding: 0 var(--s-12);
border: 1px solid transparent;
border-radius: var(--radius);
background: transparent;
font: inherit;
font-size: var(--fs-nav);
font-weight: 600;
color: var(--ink-soft);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.button-ghost:hover { background: var(--rail-hover); color: var(--ink); }
.button-icon {
width: 16px;
height: 16px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Two buttons that are one choice in two formats: joined, so the pair reads as a
single control with a split rather than as two unrelated actions. */
.button-group {
display: inline-flex;
box-shadow: var(--shadow-sm);
border-radius: var(--radius);
}
.button-group > .button-quiet { box-shadow: none; }
.button-group > .button-quiet:not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.button-group > .button-quiet:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.button-group > .button-quiet:hover { position: relative; z-index: 1; }
/* The last control in a toolbar, pushed to the far edge on a wide row and wrapping
under the rest on a narrow one. */
.actions-end { margin-left: auto; }
/* --------------------------------------------------------------- onboarding
On paper like every other card on the canvas, with the count also drawn as a bar. */
body.shell .onboard { background: var(--paper); }
.onboard-meter {
display: block;
width: 10rem;
height: 4px;
margin-top: var(--s-8);
border-radius: var(--radius-pill);
overflow: hidden;
}
.onboard-meter-track { fill: var(--track); }
.onboard-meter-fill { fill: var(--blue); }
/* A KPI tile's value that is a word ("pro") starts with a capital, without changing
what the page or a test reads. Digits are unaffected. */
.stat dd::first-letter { text-transform: uppercase; }
/* Prose leading into a table, and a search box leading into results: a gap, not a seam. */
body.shell .pane p + .scroller,
body.shell .pane .section-head + .scroller { margin-top: var(--s-12); }
body.shell .page-search { margin-bottom: var(--s-16); }
/* A provenance line rendered inside a table's card, under the last row: a footer strip
of the card rather than text pressed against its edge. */
.scroller > .source-note {
margin: 0;
padding: var(--s-12) var(--s-16);
max-width: none;
border-top: 1px solid var(--rule-soft);
background: var(--canvas);
}
/* The Watch button on every row of a results table. Each one is real - watching is the
free, one-click Value Moment - but seven filled blue buttons in a column outshout the
one watch panel above them that is the screen's actual next step. On a row they are
tinted: unmistakably a button, quieter than the lead. */
body.shell .table .button.button-small {
background: var(--blue-tint);
border-color: var(--blue-tint);
color: var(--blue-text);
box-shadow: none;
}
body.shell .table .button.button-small:hover {
background: var(--blue);
border-color: var(--blue);
color: var(--paper);
}
/* Small links that sit in runs - FDA record ids under a finding, the "Predicate check"
and "FDA record" links on a table row's sub-line - keep a 24px-tall target, the WCAG
2.2 minimum (2.5.8), now that the app's type is tighter. Inline-block so the height is
the link's own rather than borrowed from the line around it. */
.finding-records .fda-id,
.cell-sub a {
display: inline-block;
min-height: 24px;
line-height: 24px;
}
/* --------------------------------------------------------- focus not obscured
WCAG 2.2 SC 2.4.11. The top bar is sticky, and on a phone the tab strip sticks under
it, so without this a keyboard user tabbing back up a table had the focused link
scrolled to the very top of the viewport - which is behind the bar. Measured: five
focus stops on a code page and three on Competitors landed entirely under it.
scroll-padding tells the browser where the visible part of the viewport starts, and
focus navigation, anchor jumps and scrollIntoView all honour it. --promo-h is the
launch-offer bar's height (published by app.js; zero when it is absent). */
html {
scroll-padding-top: calc(var(--promo-h, 0px) + var(--topbar-h) + var(--s-16));
}
@media (max-width: 860px) {
html {
/* The bar plus the 44px tab strip under it. */
scroll-padding-top: calc(var(--promo-h, 0px) + var(--topbar-h) + 44px + var(--s-16));
}
}
/* The fixed upsell bar covers the bottom edge the same way. :has() so the padding exists
only while the bar does; a browser without :has() simply keeps today's behaviour. */
html:has(.upsell) {
scroll-padding-bottom: 160px;
}
/* A short viewport - a phone on its side, or a laptop at 200% zoom - cannot spare the
top 100px to chrome that never moves. Below 520px of height the bar and the tab strip
scroll away with the page (WCAG 1.4.10 reflow); everything in them is still at the top
of the document, one swipe up. */
@media (max-height: 520px) {
.topbar,
.rail { position: static; }
html { scroll-padding-top: var(--s-16); }
}
/* ------------------------------------------------------------ forced colours
Windows High Contrast replaces every background with the system Canvas colour, so the
current page in the rail - marked by a blue tint and a 3px bar, both backgrounds - was
indistinguishable from the links around it. A system-coloured outline survives, and
the bar is drawn in Highlight with forced-color-adjust switched off for it alone. */
@media (forced-colors: active) {
.rail-link-current { outline: 2px solid LinkText; outline-offset: -2px; }
.rail-link-current::before { forced-color-adjust: none; background: Highlight; }
.onboard-meter-fill { fill: Highlight; }
.onboard-meter-track { fill: GrayText; }
}
/* ===========================================================================
Daily-use screens, from the reader's side.
Today: the way into a code sits in each finding's header; the quiet codes are links.
Watch list: one white card of rows - code, FDA's device name, dates, a ghost Remove -
with the note printed on the row and the edit fields behind a native disclosure.
=========================================================================== */
/* -- Today ---------------------------------------------------------------- */
.finding-head { align-items: center; }
.finding-open {
margin-left: auto;
font-size: var(--fs-small);
font-weight: 600;
color: var(--blue-text);
text-decoration: none;
white-space: nowrap;
}
.finding-open:hover,
.finding-open:focus-visible { text-decoration: underline; }
.quiet-codes {
display: flex;
flex-wrap: wrap;
gap: var(--s-8);
margin: 0 0 var(--s-24);
}
.quiet-code {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 var(--s-12);
border: 1px solid var(--rule);
border-radius: var(--radius-pill);
background: var(--paper);
color: var(--ink);
font-weight: 600;
text-decoration: none;
}
.quiet-code:hover { border-color: var(--blue); color: var(--blue-text); }
/* "Nothing new since you were last here" is reassurance, not content: one compact line
group, so it does not read as a panel of equal weight to the findings beside it. */
body.shell .panel-quiet { padding: var(--s-12) var(--s-16); margin-bottom: var(--s-24); }
body.shell .panel-quiet .h3 { margin: 0 0 2px; font-size: var(--fs-body-compact); }
body.shell .panel-quiet .small { margin: 0; }
/* The checklist, wherever it now follows other content. */
body.shell .pane .onboard { margin-top: var(--s-32); }
/* A tile inside a card is a figure in a group, not a second card: no shadow, a quieter
ground, so the card around it stays the only raised surface. */
body.shell .panel .stat {
background: var(--canvas);
border-color: var(--rule-soft);
box-shadow: none;
}
/* -- Watch list ----------------------------------------------------------- */
body.shell .watch-add { max-width: 40rem; }
body.shell .watch-add .field { max-width: none; margin-bottom: 0; }
.watch-add-row {
display: flex;
flex-wrap: wrap;
gap: var(--s-8);
align-items: stretch;
}
.watch-add-row .input-code { width: 8rem; flex: none; }
body.shell .watch-list {
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
background: var(--paper);
box-shadow: var(--shadow-card);
}
body.shell .watch-row {
padding: var(--s-12) var(--s-16);
border-bottom: 1px solid var(--rule-soft);
}
body.shell .watch-row:last-child { border-bottom: 0; }
body.shell .watch-row-head {
display: grid;
grid-template-columns: 3.5rem minmax(0, 1fr) auto;
grid-template-areas: "code device remove" "code dates remove";
column-gap: var(--s-16);
row-gap: 2px;
align-items: center;
}
body.shell .watch-row-code { grid-area: code; align-self: start; padding-top: 1px; }
.watch-row-device {
grid-area: device;
min-width: 0;
font-weight: 500;
color: var(--ink);
overflow-wrap: anywhere;
}
body.shell .watch-row-dates { grid-area: dates; }
body.shell .watch-row-remove { grid-area: remove; }
/* The note, and the disclosure that edits it, line up under the device name. */
.watch-row-note,
.watch-edit {
margin: var(--s-8) 0 0 calc(3.5rem + var(--s-16));
}
.watch-row-note {
font-size: var(--fs-small);
color: var(--ink-soft);
border-left: 2px solid var(--rule);
padding-left: var(--s-8);
}
.watch-edit-toggle {
display: inline-flex;
align-items: center;
gap: var(--s-4);
min-height: 24px;
font-size: var(--fs-small);
font-weight: 600;
color: var(--blue-text);
cursor: pointer;
list-style: none;
}
.watch-edit-toggle::-webkit-details-marker { display: none; }
.watch-edit-toggle::marker { content: ""; }
.watch-edit-toggle::before { content: "+"; width: 1ch; }
.watch-edit[open] > .watch-edit-toggle::before { content: "−"; }
.watch-edit-toggle:hover { text-decoration: underline; }
@media (max-width: 600px) {
body.shell .watch-row-head {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "code remove" "device device" "dates dates";
}
.watch-row-note,
.watch-edit { margin-left: 0; }
}
/* The code on a watch row is the row's name, like a table's first column. */
body.shell .watch-row-code { text-decoration: none; }
body.shell .watch-row-code:hover,
body.shell .watch-row-code:focus-visible { text-decoration: underline; }
/* ------------------------------------------------------- predicate research
/predicates: one form holding the search, the shortlist and the results, so ticks
survive a new search with no script. */
.research-steps {
display: flex;
flex-wrap: wrap;
gap: var(--s-8) var(--s-24);
margin: 0 0 var(--s-24);
padding: 0;
list-style: none;
font-size: var(--fs-small);
color: var(--ink-faint-text);
}
.research-step {
display: inline-flex;
align-items: center;
gap: var(--s-8);
}
.research-step-n {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
border: 1px solid var(--rule-strong);
border-radius: var(--radius-pill);
background: var(--paper);
font-weight: 700;
}
.research-step-current { color: var(--ink); font-weight: 600; }
.research-step-current .research-step-n {
border-color: var(--blue);
background: var(--blue);
color: var(--paper);
}
.research-step-done .research-step-n {
border-color: var(--blue);
color: var(--blue-text);
}
/* The search box takes the width; the three filters sit beside it and wrap under it on a
phone. Each field keeps its own label, so the wrap costs nothing in meaning. */
.research-grid {
display: flex;
flex-wrap: wrap;
gap: 0 var(--s-16);
align-items: flex-start;
}
.research-grid .field { flex: 1 1 11rem; max-width: 16rem; margin-bottom: var(--s-12); }
/* The search box gets a row of its own; the filters share the row under it. */
.research-grid .field-wide { flex: 1 1 100%; max-width: none; }
.research-subject {
margin-top: var(--s-8);
padding-top: var(--s-12);
border-top: 1px solid var(--rule);
}
.research-subject summary {
cursor: pointer;
font-size: var(--fs-small);
font-weight: 600;
color: var(--ink);
}
.research-subject[open] summary { margin-bottom: var(--s-8); }
.research-selection { margin-top: var(--s-24); }
.research-selection-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s-12);
}
.research-selection-head .h3 { margin: 0; }
.research-count {
margin-left: var(--s-8);
font-size: var(--fs-small);
font-weight: 600;
color: var(--ink-faint-text);
}
.research-count-over { color: var(--risk-text); }
.research-chips {
display: flex;
flex-wrap: wrap;
gap: var(--s-8);
margin: var(--s-12) 0 0;
padding: 0;
list-style: none;
}
.research-chip {
display: inline-flex;
align-items: center;
gap: var(--s-8);
padding: var(--s-4) var(--s-8) var(--s-4) var(--s-12);
border: 1px solid var(--rule-strong);
border-radius: var(--radius-pill);
background: var(--mist);
}
.research-chip-remove {
font-size: var(--fs-small);
color: var(--ink-soft);
}
.research-plan-note {
margin: var(--s-12) 0 0;
font-size: var(--fs-small);
color: var(--ink-soft);
}
.research-list { margin: 0; padding-left: var(--s-24); }
.research-list li { margin-bottom: var(--s-8); }
.cell-pick { width: 2.75rem; }
/* A 24px target, which is the WCAG 2.2 minimum, on a control that is otherwise 13px. */
.cell-pick input {
width: 1.5rem;
height: 1.5rem;
margin: 0;
accent-color: var(--blue);
}
.research-results-foot { margin-top: var(--s-16); }
/* "Class II" and "5 January 2026" are one thing each; split over two lines they read as two. */
.research-results .cell-tight,
.research-results .cell-tight .cell-sub { white-space: nowrap; }