/* Finish Line Adjusters — claims portal.
One stylesheet, no build step, no CDN.
------------------------------------------------------------------
BRAND
------------------------------------------------------------------
#3f63c8 is the Finish Line Adjusters blue, taken from
finishlineadjusters.com. It is the primary throughout: the header,
buttons, links, tabs and focus rings.
It was chosen for us, but it happens to be usable: 5.5:1 against
white, which clears WCAG AA for normal text in both directions —
blue text on white and white text on blue. The darker step is 7.3:1.
Neither is a coincidence worth relying on if the brand color ever
changes: re-check it, because a brand color that fails contrast has
to be paired with a darker text-only variant rather than used as-is.
------------------------------------------------------------------
THE STAGING BANNER IS DELIBERATELY NOT BRAND-COLORED
------------------------------------------------------------------
config.php's own comment says the environment is shown "so nobody
edits a live claim thinking they are on staging". Now that the
header is brand blue, an amber banner is not merely different — it
is the one thing on the page that is not the brand, plus diagonal
hazard stripes. It cannot be mistaken for chrome.
------------------------------------------------------------------ */
/* ==================================================================
SURFACE TOKENS — 2026-09-16
==================================================================
⚠ NOTHING IS PURE WHITE OR PURE BLACK. This is read all day by
people who do not get to look away from it, and #fff against #000 is
the highest-contrast pair a screen can make — which is exactly the
problem over eight hours. Every surface is a step off white and every
ink a step off black.
Four surfaces, not two, because a panel on a page needs to sit on
something and an inset (a table head, a disabled field, a code block)
needs to sit INSIDE something:
--ground the page behind everything
--surface a panel, a card, a row
--sunk an inset within a panel
--line / --line-soft a real division, and a division that is
only there so the eye can group
Three inks, so that "less important" is a step down rather than a
different hue: --ink, --ink-soft, --ink-faint.
⚠ THE ACCENT AND THE SEMANTIC COLOURS ARE SEPARATE AND MUST STAY
SEPARATE. --accent is "this is the thing to press / where you are".
ok / warn / danger are "this is how it went". The moment a success
message borrows the accent, or a primary button borrows green, the
page stops being able to say either one.
These are TOKENS SO THE DASHBOARD AND ADMIN SCREENS CAN FOLLOW. The
claim screen is the first to use them; nothing else has moved yet,
and the old brand variables below are kept pointing at them so the
rest of the application does not change colour in the same commit.
================================================================== */
/* ==================================================================
THE PALETTE — ONE SET, LIGHT ONLY (2026-09-16)
==================================================================
⚠ DARK MODE IS GONE, AND ITS REMOVAL IS THE FIX RATHER THAN A
SIMPLIFICATION.
There were two palettes and a component only ever took one of them
per property. That is where the unreadable pills came from: a pale
pink ground from the light set under light ink from the dark set,
on a screen nobody testing in daylight ever saw. A second palette is
a second thing to keep in step, forever, and this is an internal
tool on office monitors.
So: no prefers-color-scheme, no data-theme, no dark token set.
⚠ AND `color-scheme: light` IS DECLARED, which is the half that is
easy to forget. Without it a browser set to dark still renders the
FORM CONTROLS and SCROLLBARS dark — a dark select and a dark
scrollbar on a white page — because those are drawn by the browser
and not by this stylesheet. The declaration is what makes the page
hold its own appearance whatever the machine is set to.
------------------------------------------------------------------
THE SKY TINT DOES THE SEPARATING
------------------------------------------------------------------
Panel headers and table header rows take --sky with --sky-line
beneath them. That blue band is what tells one box from the next,
which is why the borders around them can stay faint: separation by
tint rather than by a hard rule reads quieter and survives a page
with nine panels on it.
------------------------------------------------------------------
SEMANTIC IS NOT ACCENT
------------------------------------------------------------------
--accent is "press this / you are here". ok / warn / danger are
"this is how it went". Each semantic colour is a TRIPLE — ink,
ground and border — because taking two and hard-coding the third is
exactly how the borders stayed pale when everything else moved.
================================================================== */
:root {
color-scheme: light;
--ground: #eef1f5;
--surface: #ffffff;
--sky: #e9f2fb;
--sky-line: #c9deef;
--line: #d3dce6;
--line-soft: #e6ebf1;
--ink: #17273a;
--ink-soft: #4a5b70;
/* ⚠ #5e6d82, NOT #74849a. The lighter value measured 3.36-3.81:1
depending on the ground, and this token is not only for labels —
.faint renders INLINE AS BODY TEXT ("nobody", "+ field adjusters",
the em dash in a voided invoice row), so the small-text exemption
does not apply to it. #5e6d82 clears 4.5:1 on all three grounds. */
--ink-faint: #5e6d82;
--accent: #2f6fb5;
--accent-soft: #e3eff9;
--accent-line: #bcd8ef;
--ok: #1c7048; --ok-bg: #e8f5ee; --ok-line: #bfe2ce;
--warn: #a35b00; --warn-bg: #fdf2e0; --warn-line: #f0d5a8;
--danger: #b42d22; --danger-bg: #fdeceb; --danger-line: #f3ccc8;
/* Text on a saturated fill. One palette means one answer: white.
The two-ink split (--on-brand / --on-fill) existed only because
the fills flipped with the theme. They no longer flip; both names
are kept because other rules still say them. */
--on-brand: #ffffff;
--on-fill: #ffffff;
--accent-ink: #ffffff;
/* ⚠ --brand IS THE COMPANY BLUE AND IS NOT --accent. It is
#3f63c8 from finishlineadjusters.com, it is what the header bar
is, and Finish_Line_Logo_White.svg was derived as a knockout FOR
that bar. Repainting the header would make the supplied mark wrong
rather than merely different. --accent is the interface blue and
is used everywhere else. Say the word if the header should follow
the accent and the logo be regenerated with it. */
--brand: #3f63c8;
--brand-dark: #33529f;
--brand-deep: #2a4585;
--brand-soft: var(--accent-soft);
--brand-line: var(--accent-line);
--brand-ring: rgba(47, 111, 181, .35);
/* A panel quieter than its neighbours, and a table row under the
cursor. */
--surface-quiet: #f8fafc;
--surface-hover: #f4f7fb;
/* ⚠ --sunk IS NEUTRAL AND IS NOT --sky. It was aliased to the tint
for a moment, which put a blue wash on every "retired" tag and
every quiet pill — states that mean "switched off", and blue is
the one thing they must not look like. The sky tint is for HEADER
BANDS; this is for an inset that should recede without colouring. */
--sunk: #f0f3f7;
/* Kept and repointed: other screens still name these. */
--bg: var(--ground);
--panel: var(--surface);
--warn-ink: var(--warn);
/* The remaining literals, named. Each was a component setting its
own colour: the staging banner's hazard stripes, the two
white-with-alpha inks the header bar uses on its own blue, and the
hairline under the pinned summary bar. */
--stripe: rgba(217, 130, 43, .16);
--on-brand-soft: rgba(255, 255, 255, .88);
--on-brand-line: rgba(255, 255, 255, .70);
/* ⚠ A FILL ON THE BAR COMES WITH ITS OWN INK, AND --on-brand-line IS
NEVER A BACKGROUND (2026-10-01). It is a LINE — an underline, a
border. Used as a fill it composites over --brand to #c5d0ee, a
near-white chip, and white ink on that is 1.54:1. That happened
THREE times: the "you are here" chip, the badge, and then every
hover and open button in the bar, which nobody saw until the
dropdowns stopped being clipped. Each fill below names the ink
that reads on it; use the pair, never one half.
--on-brand-press hover / open ink --on-accent 7.37:1
--on-brand-chip "you are here" ink --on-brand-chip-ink
5.96:1 */
--on-brand-press: var(--brand-dark);
--on-brand-chip: rgba(255, 255, 255, .70);
--on-brand-chip-ink: var(--brand-deep);
/* The STAGING tag's fill. It was --warn-line used as a background —
the same line-as-fill shape bin/css_pairs.php now refuses. */
--warn-chip: var(--warn-line);
/* ⚠ --on-accent WAS USED IN FOUR PLACES AND DEFINED IN NONE.
Found while consolidating the top bar.
A var() with no definition and no fallback makes the WHOLE
declaration invalid at computed-value time — it does not fall back
to anything sensible. So:
.topnav a:hover { color: var(--on-accent) } did nothing
.topbar .linkbtn:hover { color: ... } did nothing
.topbar :focus-visible { outline: 3px solid ... } DID NOT RENDER
That last one matters: the comment above it says focus has to be
visible against blue and not just against white, and it has not
been. Keyboard users have had no visible focus ring anywhere in
the header.
It is full-strength white — the same ink as --on-brand, which is
what "the strong ink for this bar" means. Kept as its own name
rather than replacing the four call sites, because the call sites
are asking for "the ink that reads on the accent/brand fill" and
that is a different question from "the brand's own foreground". */
--on-accent: #ffffff;
--shadow-sm: 0 1px 0 rgba(0, 0, 0, .04);
/* ⚠ NUMBERS, DATES, MONEY AND CLAIM NUMBERS ARE MONOSPACED WITH
TABULAR FIGURES. A column of money in a proportional face does not
line up, and a claim number is read a character at a time. */
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
"Liberation Mono", monospace;
}
/* Money, dates, claim numbers. One class, used everywhere a figure has
to line up with the figure above it. */
.num, .claimbar-ref, .rail-count {
font-variant-numeric: tabular-nums;
font-family: var(--mono);
}
.faint { color: var(--ink-faint); }
.r { text-align: right; }
/* Links carry the brand. Visited is not differentiated: on an internal
application every link is one you have followed, and a second color
would be noise rather than information. */
/* ⚠ LINK TEXT TAKES --accent, NOT --brand. --brand is the FILL behind
white text on the header bar; --accent is the interface blue that
reads as text on a page. They are close but they are not the same
job, and using the fill colour as text is how a link ends up at the
wrong weight against the ground. */
a { color: var(--accent); }
a:hover { color: var(--brand-dark); }
/* One focus style everywhere, and it is never removed. Keyboard users
have to be able to see where they are. */
:focus-visible {
outline: 3px solid var(--brand-ring);
outline-offset: 1px;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
-webkit-text-size-adjust: 100%;
}
/* --- staging banner ------------------------------------------- */
.envbar {
background: var(--warn-bg);
color: var(--warn-ink);
border-bottom: 3px solid var(--warn-line);
padding: .5rem 1rem;
font-size: .875rem;
display: flex;
gap: .75rem;
align-items: baseline;
flex-wrap: wrap;
/* Hazard stripes. Nothing else in the application looks like this,
which is the entire point. */
background-image: repeating-linear-gradient(
-45deg,
var(--stripe) 0 10px,
transparent 10px 20px
);
}
/* ⚠ THIS BADGE WENT WHITE-ON-PALE-AMBER THE DAY --on-accent WAS
DEFINED — found 2026-09-24 alongside the dropdown bug, and it is
the same mistake: an ink meant for a SATURATED fill used on a PALE
ground.
It did not show up sooner because the rule had never rendered.
--on-accent was used in four places and defined in none, so
`color: var(--on-accent)` was invalid at computed-value time and the
whole declaration was dropped — the badge simply inherited the
banner's amber ink and looked right. Defining the token during the
top-bar consolidation switched the rule ON, at 1.42:1, on the one
element CLAUDE.md says must be impossible to miss: the word that
tells somebody they are not editing a live claim.
⚠ --warn IS NOT THE ANSWER HERE, WHICH IS COUNTER-INTUITIVE. It is
the right ink for --warn-bg (4.68:1, which is what the banner around
this badge uses) and the wrong one for --warn-line, the darker
ground the badge itself takes: measured 3.65:1, still a fail. The
semantic pairing is per GROUND, not per family. --ink is 10.66:1 on
it, and the badge is already shouting through weight, letter-spacing
and the amber pill — it does not need the ink to shout as well. */
.envbar strong {
letter-spacing: .1em;
font-weight: 700;
background: var(--warn-chip);
color: var(--ink);
padding: .05rem .45rem;
border-radius: 3px;
}
/* --- header --------------------------------------------------- */
.topbar {
background: var(--brand);
color: var(--on-brand);
border-bottom: 1px solid var(--brand-deep);
padding: .75rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.brand {
display: inline-flex;
align-items: center;
gap: .5rem;
text-decoration: none;
color: var(--ink);
font-weight: 600;
}
/* The header mark. NO PLATE — the header uses the white knockout SVG,
which sits on the brand bar directly. See views/layout/head.php.
The viewBox is 1600x1200 (4:3) and carries no width/height, so a
height here sizes it and the width follows. */
.brand-logo {
height: 32px;
width: auto;
display: block;
}
.topbar-right { display: flex; align-items: center; gap: .75rem; }
.whoami { color: var(--ink-soft); font-size: .9rem; }
.inline { display: inline; margin: 0; }
.linkbtn {
background: none;
border: 0;
padding: 0;
color: var(--ink-soft);
font: inherit;
font-size: .9rem;
text-decoration: underline;
cursor: pointer;
}
.linkbtn:hover { color: var(--ink); }
/* --- layout --------------------------------------------------- */
.wrap { max-width: 62rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.narrow { max-width: 26rem; margin: 3rem auto; }
.panel {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 8px;
padding: 1.5rem;
}
/* ⚠ A PANEL HEADER IS A BAND, NOT JUST A HEADING.
The h2 (or the .pagehead holding it) is pulled out to the panel's own
edges, given the sky tint and a sky line beneath, so a column of nine
panels reads as nine boxes rather than one long page of text. The
negative margins are what let a 1.5rem-padded panel carry a
full-bleed band without every panel needing a wrapper element. */
.panel > h2:first-child,
.panel > .pagehead:first-child {
margin: -1.5rem -1.5rem 1.25rem;
padding: .7rem 1.5rem;
background: var(--sky);
border-bottom: 1px solid var(--sky-line);
border-radius: 7px 7px 0 0;
}
.panel > h2:first-child { font-size: 1rem; }
.panel > .pagehead:first-child { align-items: center; }
.panel > .pagehead:first-child h2 { margin: 0; font-size: 1rem; }
/* A quiet panel keeps the band but drops the tint, so "quieter" is
visible rather than merely asserted. */
.panel-quiet > h2:first-child,
.panel-quiet > .pagehead:first-child {
background: var(--surface-quiet);
border-bottom-color: var(--line-soft);
}
h1 { font-size: 1.35rem; margin: 0 0 .25rem; }
h2 { font-size: 1.05rem; margin: 1.75rem 0 .5rem; }
.sub { color: var(--ink-soft); font-size: .9rem; margin: 0 0 1.25rem; }
/* --- forms ---------------------------------------------------- */
.field { margin-bottom: 1rem; }
label, .field-label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .3rem; }
/* ⚠ TEXTAREA WAS MISSING FROM THIS LIST ENTIRELY.
Every text area in the app was therefore rendering at the browser
default of cols=20 -- about 190px -- inside containers three times
that wide, with none of the border, padding or font of the inputs
beside it. Making the note box taller did nothing about that,
because the width was never set at all.
`tel` and `search` were missing for the same reason: the selector
named three input TYPES rather than covering the text-like controls,
so a phone field sat at 190px next to a full-width name field in the
same row. */
input[type=email],
input[type=password],
input[type=tel],
input[type=search],
input[type=text],
textarea {
width: 100%;
padding: .55rem .65rem;
border: 1px solid var(--line);
border-radius: 6px;
font: inherit;
background: var(--surface);
color: var(--ink);
}
input:focus,
textarea:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
border-color: var(--accent);
}
textarea {
display: block;
/* Vertical only. Horizontal dragging inside a full-width box makes a
text area narrower than its container, which is the problem this
rule exists to fix. */
resize: vertical;
line-height: 1.5;
/* The rows= attribute sets the starting height and stays the floor
with script off; charcount.js grows it from there. */
min-height: 4.5rem;
}
.btn {
display: inline-block;
width: 100%;
padding: .6rem 1rem;
background: var(--accent);
color: var(--on-fill);
border: 1px solid var(--accent);
border-radius: 6px;
font: inherit;
font-weight: 600;
cursor: pointer;
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--on-fill); }
.btn:active { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--on-fill); }
.hint { color: var(--ink-soft); font-size: .82rem; margin-top: .35rem; }
/* --- messages ------------------------------------------------- */
.flash, .alert {
border-radius: 6px;
padding: .7rem .9rem;
margin-bottom: 1rem;
font-size: .92rem;
border: 1px solid transparent;
}
.flash-ok, .alert-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.flash-err, .alert-err { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.flash-warn, .alert-warn { background: var(--warn-bg); border-color: var(--warn-line); }
/* --- dashboard ------------------------------------------------ */
.meta { border-collapse: collapse; width: 100%; font-size: .92rem; }
.meta th, .meta td {
text-align: left;
padding: .45rem .5rem;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.meta th { width: 12rem; color: var(--ink-soft); font-weight: 600; }
.pill {
display: inline-block;
background: var(--sunk);
border: 1px solid var(--line);
border-radius: 999px;
padding: .1rem .6rem;
font-size: .8rem;
margin: 0 .25rem .25rem 0;
}
.todo { color: var(--ink-soft); font-size: .92rem; }
.todo li { margin-bottom: .3rem; }
/* --- footer --------------------------------------------------- */
.foot {
border-top: 1px solid var(--line);
padding: 1rem;
text-align: center;
color: var(--ink-soft);
font-size: .82rem;
}
/* ==============================================================
Roster (build step 2)
============================================================== */
/* --- header nav ----------------------------------------------- */
.topnav { margin-left: 1.25rem; display: flex; gap: 1rem; flex: 1; }
.topnav a {
color: var(--ink-soft);
text-decoration: none;
font-size: .92rem;
padding: .2rem 0;
border-bottom: 2px solid transparent;
}
.topnav a:hover { color: var(--ink); border-bottom-color: var(--line); }
/* --- page header + toolbar ------------------------------------ */
.pagehead {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.pagehead h1 { margin-bottom: .2rem; }
/* ==================================================================
⚠ THE ACTION SLOT IN A PAGE HEAD (2026-09-24)
==================================================================
Some page heads carry one action and some carry two, so the right
hand side is an .actions row rather than a bare . Two things that
are right inside a form are wrong here:
margin-top: 1rem — written to separate a submit row from the last
field above it. In a head it drops the buttons
below the heading they sit beside.
.btn width: 100% — the same rule .grid .btn already has to undo.
A head action is not "the one action this form
exists to perform"; it is a way onward, and two
of them would divide the slot between
themselves and stretch.
⚠ NO COLOURED BAR HERE, AND THERE MUST NOT BE ONE. A filled strip
spanning the window reads as a section header for everything beneath
it, and costs a row of vertical space the first panel wants. The
sky band belongs to .panel > .pagehead:first-child, where it is
separating one box from the next — a page head is not a box. */
.pagehead > .actions {
margin-top: 0;
flex: 0 0 auto;
}
.pagehead > .actions .btn,
.pagehead > .actions .btn-quiet,
.pagehead > .actions .btn-danger {
width: auto;
white-space: nowrap;
}
/* ------------------------------------------------------------------
THE WAY BACK IS A BUTTON, NOT A GREY LINK
------------------------------------------------------------------
It used to be small muted text at the very top of the page — easy to
miss, easy to mis-click, and invisible to somebody who is not
scanning for links. It is the control people use most and it was the
quietest thing on the screen.
Styled here rather than by editing every page, so all 25 of them
upgrade at once and none can be left behind.
------------------------------------------------------------------ */
.crumb { margin: 0 0 1rem; }
.crumb a {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .5rem .9rem;
background: var(--brand-soft);
color: var(--brand-dark);
border: 1px solid var(--brand-line);
border-radius: 6px;
font-size: .92rem;
font-weight: 600;
text-decoration: none;
}
.crumb a:hover {
background: var(--brand);
border-color: var(--brand);
color: var(--on-brand);
text-decoration: none;
}
.crumb a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
/* The same control repeated at the FOOT of a long page, so nobody has
to scroll back up to leave. Separated by a rule so it reads as the
end of the page rather than as part of the last panel. */
.backfoot {
margin: 2rem 0 .5rem;
padding-top: 1.2rem;
border-top: 1px solid var(--line);
}
.toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin: 1rem 0 .75rem;
}
.tabs { display: flex; gap: .25rem; }
.tab {
display: inline-block;
padding: .35rem .8rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--panel);
color: var(--ink-soft);
text-decoration: none;
font-size: .88rem;
}
.tab:hover { color: var(--ink); }
.tab.is-on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.searchform { display: flex; align-items: center; gap: .4rem; }
.searchform input[type="search"] {
padding: .4rem .6rem;
border: 1px solid var(--line);
border-radius: 6px;
font: inherit;
font-size: .92rem;
}
/* --- data grid ------------------------------------------------ */
/* The state checkbox grid on the public application form. Two-letter
codes in columns rather than fifty-three stacked rows. */
.stategrid {
display: grid; gap: .25rem .75rem;
grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
}
.stategrid .check { margin: 0; font-size: .92rem; }
/* Three across, where .row2 is two. */
.row3 { display: grid; gap: 0 1rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 40rem) { .row3 { grid-template-columns: 1fr; } }
/* Package position box. Narrow on purpose — it takes a number, not a
sentence, and a full-width input in a table cell reads as a place to
type a name. */
.posbox {
width: 3.5rem; text-align: center; padding: .25rem .35rem;
font-variant-numeric: tabular-nums;
}
/* Claim list pager. The count line is the important half: it says
which claims these are out of how many, so a page is never mistaken
for the whole list. Hidden in print by the @media print block. */
.pager {
display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: .5rem 1rem;
margin: .85rem 0 .25rem;
}
.pager-count { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.pager-count strong { color: var(--ink); font-weight: 600; }
.pager-links { display: flex; align-items: center; gap: .75rem; margin: 0; }
.pager-where { color: var(--ink-soft); font-size: .92rem; white-space: nowrap; }
.grid {
width: 100%;
border-collapse: collapse;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
font-size: .92rem;
}
.grid th, .grid td {
text-align: left;
padding: .6rem .7rem;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
/* ⚠ THE SKY BAND IS WHAT SEPARATES ONE BOX FROM THE NEXT, which is why
the rules between rows can stay faint. A header row that is only a
bolder font disappears the moment the table is long enough to scroll
its head off. */
.grid thead th {
background: var(--sky);
border-bottom: 1px solid var(--sky-line);
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--ink-soft);
}
/* A SORTABLE HEADING (2026-10-22, the documents lists) reads as a
heading, not a blue link: the header's own ink, underlined only on
hover or keyboard focus. No background of its own, so it sits on the
sky band like any heading. */
.grid thead th a.sorthead { color: inherit; text-decoration: none; }
.grid thead th a.sorthead:hover,
.grid thead th a.sorthead:focus-visible { text-decoration: underline; }
/* The body's own rules are the soft border; the sky line above is the
only hard division in the table. */
.grid tbody td { border-bottom-color: var(--line-soft); }
.grid tbody tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover { background: var(--surface-hover); }
.grid-tight th, .grid-tight td { padding: .4rem .6rem; }
/* ==================================================================
⚠ A BUTTON IN A TABLE CELL IS A ROW ACTION, NOT THE ACTION THE
FORM EXISTS TO PERFORM — 2026-09-24
==================================================================
`.btn` carries `width: 100%`, which is right for the one blue button
at the bottom of a form and catastrophic in a `
`: a percentage
width resolves against the cell, so EVERY button in a cell is drawn
exactly as wide as its own column.
Two of them in one cell is therefore 200% of that cell. In the QA
queue the cell is `td.nowrap` — Take and Review cannot wrap onto
two lines — so they ran side by side past the right-hand edge and
`.grid`'s own `overflow: hidden` (there to clip the header band to
the rounded corner) CUT THEM OFF. Take was half a button and Review
was not on the screen at all. It reads as a missing feature, which
is how it was reported: "nothing carries a reviewer from the queue
to approving".
This was already known one component at a time — `.tasklist .task
.btn` and `.taskcontrol .btn` both set `width: auto` locally, and
`.btn-draft` sets it a third time. Those are three copies of this
rule written after three separate sightings. It belongs once, here,
where a `.grid` cell is the general case. */
.grid .btn,
.grid .btn-quiet,
.grid .btn-danger {
width: auto;
white-space: nowrap;
padding: .35rem .7rem;
font-size: .88rem;
}
/* ==================================================================
⚠ A WIDE TABLE SCROLLS ITSELF. IT MAY NOT CLIP, AND IT MAY NOT
WIDEN THE PAGE — 2026-09-24
==================================================================
Those are the only two things an unwrapped .grid can do, and the
list pages do both:
`.grid` is `width: 100%` with `overflow: hidden`. Auto table
layout uses max(specified, min-content), so a table whose columns
cannot fit GROWS PAST .wrap and the whole document gets a
horizontal scrollbar — measured at 975px (the roster, on one long
email address) and 1246px (Admin > States, three