and carry no
* grid--fixed, so the browser sizes each column to its content. That is the right
* answer for a reference list: the MDE number column takes the two characters it
* needs instead of the twelfth of the table a declared width would give it, and
* nothing overflows because nothing is pinned. table-layout is stated explicitly
* rather than left to inherit, so a future rule cannot quietly pin them.
*
* THE HEADINGS STILL WRAP. With auto layout a nowrap header sets a floor under
* its column width, and "Local Approving Authority" would then be the widest
* thing in the table. Wrapping the header to two lines costs one row of height
* once; not wrapping it costs width on every row.
* ========================================================================== */
.usa-table--dense{table-layout:auto}
.usa-table--dense td,
.usa-table--dense th{padding:.25rem .35rem;font-size:var(--fs-floor);line-height:1.35}
.usa-table--dense thead th{white-space:normal;vertical-align:bottom}
/* Sub-lines inside a grouped cell. This is what makes six columns carry twelve
columns' worth of facts: the related values stack instead of spreading. */
.usa-table--dense .sub{display:block;font-size:var(--fs-micro);color:var(--c-ink-muted)}
.usa-table--dense .num{font-variant-numeric:tabular-nums;white-space:nowrap}
/* ==========================================================================
* CELLS WRAP INSIDE A SCROLLABLE CONTAINER — overriding USWDS
* Author: Sharmila Parthiban. 8/25/2026.
*
* USWDS declares, in its own stylesheet:
*
* .usa-table-container--scrollable td{white-space:nowrap}
*
* That is a deliberate choice on their part and a reasonable one in isolation: if
* a table is going to scroll sideways, wrapping cells fights the scrolling. But it
* is applied to EVERY td inside the container, and because every table in this
* portal is now in one, it switched nowrap back on across the whole application.
*
* That is what "text is not wrapped, it is going outside the table" was. It also
* explains why removing the truncation from .cellone did not produce wrapping:
* .cellone no longer says anything about white-space, so with nothing setting it
* to normal, USWDS's nowrap simply won. Two separate rules had to go, and only
* one of them was mine.
*
* THE TRADE, stated because it is a real one. Nowrap plus sideways scrolling suits
* a wide numeric table where every column is short and the reader compares down a
* column. It does not suit this application: the cells hold addresses, company
* names and reasons, of unbounded length, and the instruction is that the tables
* fit the screen. Wrapping spends height, of which a page has plenty, instead of
* width, of which it has none.
*
* Specificity, deliberately: `.usa-table-container--scrollable .usa-table td` is
* 0,2,1 against USWDS's 0,1,1, so this wins on specificity and does not depend on
* which stylesheet loads last — the CDN link and this inline block could arrive in
* either order. No !important, for the same reason: an override that needs
* !important is one nobody can override in turn.
*
* overflow-wrap:break-word handles the case wrapping alone cannot — a long
* unbroken token such as lk_jurisdiction_required_attachment has no space to break
* at, and would still push the column wide.
* ========================================================================== */
.usa-table-container--scrollable .usa-table td,
.usa-table-container--scrollable .usa-table th{
white-space:normal;
overflow-wrap:break-word;
}
/* The exceptions, and they are narrow on purpose: a figure or a coded identifier
that breaks mid-token is harder to read broken than scrolled to. */
.usa-table-container--scrollable .usa-table .num,
.usa-table-container--scrollable .usa-table .font-mono{white-space:nowrap}
th button{all:unset;cursor:pointer;font-weight:700;display:inline-flex;gap:.3rem;align-items:center}
/* ---- fixed column geometry, for the Blueprint AND the dashboard ------- *
* THE DEFECT THIS FIXES: on the Blueprint the column headers did not line up
* over the data underneath them.
*
* The cause is the combination of three things that are each reasonable on
* their own. `table.grid` is `width:100%`; `thead th` is `white-space:nowrap`,
* so a header label sets a floor under its column's width; and the Blueprint's
* content is wildly uneven — section 7 pairs a 4-character "Null" column with
* a 1,200-character explanation, and section 3 puts seven full role names
* across the head of a matrix whose cells contain "grant", "DENY" or "·".
*
* Under automatic table layout the engine then has to satisfy the nowrap
* headers first and share what is left by content, so the table grows wider
* than its card and `.tbl-wrap` starts scrolling sideways. What the reader
* sees is a header sitting over the wrong data: the long prose column has
* swallowed the width, the narrow columns are pinched to their header text,
* and the association between a heading and the values beneath it is lost.
* Worse, it resolves differently at different widths and zoom levels, which is
* why it reads as intermittent.
*
* `table-layout:fixed` plus an explicit width per column takes the
* decision away from the content: the column edges are declared, the first row
* cannot renegotiate them, and every engine draws the same grid. Two knock-on
* rules are required, not optional — with fixed layout a header that cannot
* wrap would simply be clipped, and a long unbroken identifier like
* `lk_jurisdiction_required_attachment` would overflow its cell. So headers
* wrap here, and long tokens are allowed to break.
*
* THE DASHBOARD NOW USES IT TOO — 8/24/2026. It did not, and the note here
* used to say why: "there the columns hold short, similar values and sizing to
* content is the better answer". That stopped being true the moment the package
* column grew a tile strip and two sentences, and the misalignment was reported
* again against the dashboard. Two separate faults were in play:
*
* 1. The eight declared column widths summed to 142%, not 100%
* (16+18+20+16+20+16+14+22). Under automatic layout a browser treats each
* as a suggestion and, faced with an impossible set, renegotiates the lot
* against content — so no column ended up where its header said it would,
* and it resolved differently at every window width and on every filter.
* 2. One cell held far more than its neighbours, so content-based sizing gave
* it the space and pinched everything else.
*
* Both are fixed: the percentages now sum to 100, the dashboard declares a
* per column and takes fixed layout, and the package column is reduced to
* one icon (see WS.packageIconCell) so no cell is an outlier again.
*
* ---- WHY THE FLOOR IS 60rem AND NOT 52rem ---------------------------------
* Raised 8/24/2026, and this is the one number in the file that is pure
* arithmetic rather than judgement. Four columns are now a single .gicon button
* at 6% each, and under table-layout:fixed a column NEVER grows to fit its
* content — content that does not fit simply overflows into the neighbouring
* cell. So the narrowest column has to be wide enough for the widest thing put
* in it, or the grid draws itself wrong:
*
* .gicon min-width 2.25rem
* its 1px borders, both sides + 0.125rem
* td padding, .45rem .55rem + 1.1rem
* ------------------------------------------
* a 6% column must be at least 3.475rem
*
* 6% of 52rem is 3.12rem — short by a third of a rem, four times over, which is
* exactly the "header does not line up with the data" that was reported again
* after the icons went in. 6% of 60rem is 3.6rem, which clears it.
*
* Below 60rem .tbl-wrap scrolls sideways, which it already did below 52rem;
* the only change is that the scrollbar appears a little sooner on a narrow
* window. ws_checkColumnWidths() asserts this relationship rather than trusting
* the comment, so shrinking a column or fattening the button is caught on the
* page. The Blueprint tables share the class and the floor, and their columns
* are far wider than 6%, so nothing there is affected but the scroll point. */
/* ---- CORRECTED 8/25/2026 — the selector, and the floor ------------------- *
* Author: Sharmila Parthiban.
*
* This rule read `table.grid.grid--fixed`, requiring BOTH classes. When the
* tables were converted to USWDS they stopped carrying .grid — they are
* `usa-table usa-table--striped grid--fixed` now — so this rule silently matched
* nothing. Two things were lost at once and neither would have thrown an error:
* table-layout:fixed, so the Blueprint and Help tables went back to negotiating
* their columns against content and the prose column took the table again, which
* is the exact misalignment reported twice; and the min-width floor.
*
* The selector is now on grid--fixed alone, so it holds regardless of what else
* the table carries.
*
* THE FLOOR DROPS FROM 60rem TO 46rem. 60 was arithmetic for the OLD dashboard:
* eight columns of which four were 6% icon buttons needing 3.475rem each, so the
* table had to be at least 60rem for 6% to clear it. Those icon columns no
* longer exist. What is left on this class is the Blueprint and Help tables,
* whose narrowest declared column is 6% of the table holding a short coded value,
* and 6% of 46rem is 2.76rem — enough for "Null" or "bit" with padding.
*
* 46rem is chosen against the window, not the content: it is 736px, so a 768px
* tablet in portrait fits these tables with NO horizontal scroll at all. Above
* that the declared widths do the work; below it the container scrolls, which is
* why the container rule above had to be fixed first. A floor that forced a
* scrollbar onto every tablet was the larger of the two problems. */
table.grid--fixed{table-layout:fixed;min-width:46rem}
/* ======================= THE DASHBOARD TABLE, FIFTH ATTEMPT ================
* Author: Sharmila Parthiban. 8/24/2026.
*
* Reported for the fifth time: "STILL PROTOTYPE IS NOT ALIGNED IN TABLEWISE".
* Four fixes had been tried — rebalancing the widths to 100, declaring
* box-sizing locally, cutting eight columns to five, adding gridlines — and the
* header still did not sit over its data. So the mechanism goes, not the numbers.
*
* WHAT WAS ACTUALLY WRONG: table-layout:fixed. Under fixed layout a column is
* exactly as wide as its says and NEVER GROWS TO FIT ITS CONTENT. Content
* that does not fit does not wrap the column wider — IT OVERFLOWS SIDEWAYS INTO
* THE NEIGHBOURING CELL. The column edge is where it was declared, the header sits
* exactly over that edge, and the VALUE is drawn somewhere else. That reads as
* "the data is not aligned with the column", it is impossible to fix by moving
* percentages around, and it is why every previous attempt failed: they were all
* adjusting the one thing that was already correct.
*
* The fix is to stop declaring the geometry and let the browser compute it.
* THE HEADER AND THE BODY ARE IN THE SAME TABLE. Under table-layout:auto the
* engine measures every row INCLUDING the header rows and produces one set of
* column widths that all of them share. Misalignment stops being something to
* get right and becomes structurally impossible — there is no code path in any
* engine that gives a | one width and the | beneath it another.
*
* The percentages are KEPT and are still useful: under auto layout a
* width is a PREFERENCE rather than a command, so the proportions are
* honoured where the content allows and quietly ignored where it does not. That
* is exactly the behaviour wanted — the intended shape, with correctness winning
* whenever the two disagree.
*
* AND border-collapse GOES TO separate. `position:sticky` on combined
* with border-collapse:collapse is a genuine WebKit/Blink defect: with collapsed
* borders the table paints the borders rather than the cells, so a sticky header
* is composited without them and can be drawn a pixel or two off its column.
* Two of the reported symptoms — a header slightly out of register, and the
* header's gridlines vanishing while the body kept its own — are that bug and not
* the geometry at all. border-spacing:0 keeps the cells flush, so it looks
* identical to a collapsed table while sticking correctly.
*
* min-width is kept: below it the wrapper scrolls sideways instead of crushing
* five columns into a phone width. A scrollbar is a known gesture; a 40px column
* of wrapped single characters is not.
* ========================================================================== */
table.grid--dash{
table-layout:auto;
min-width:60rem;
border-collapse:separate;
border-spacing:0;
}
/* These three came free with .grid--fixed and have to be restated, because
dropping that class also dropped them — and the first one is load-bearing.
table.grid thead th sets white-space:nowrap, which under AUTO layout is far
worse than under fixed: a header that cannot wrap sets a hard minimum width
for its whole column, so "Applicant & well site" and "Well driller & filed"
would each demand a single unbroken line and force the table wider than its
card — pushing the very misalignment this change removes. Headers must wrap. */
/* ======================= THE ONE-LINE RULE, AND WHY ========================
* Author: Sharmila Parthiban. 8/24/2026, after the alignment was reported wrong
* a fifth time and the rendered row was pasted back to me. That paste settled it.
*
* The five cells of one row contained 1, 3, 3, 2 and 2 lines of text. Every column
* was the correct width and every header sat exactly over its own column — and the
* row still read as a ragged vertical block rather than a table row, because with
* vertical-align:top the values in a five-line-tall row start at five different
* places and only one of them lines up with anything. THAT is the design flaw. It
* was never a geometry bug, which is why box-sizing, re-balanced widths, fewer
* columns, gridlines and auto layout each fixed something real and none of them
* fixed what was being reported.
*
* SO EVERY CELL IS NOW EXACTLY ONE LINE, and every row is exactly one line tall.
* A table whose rows are a uniform height cannot look misaligned: the baselines
* agree by construction. The sub-lines are not lost — they are in the row's own
* details panel, which is what "have all details as I will be lost" asked for.
*
* nowrap plus ellipsis is what ENFORCES it. Without them a long owner name wraps,
* that one row becomes two lines tall, and the raggedness is back in a single row.
* The full value is on the title attribute AND repeated in the panel, so nothing
* is reachable only by hover — a tooltip is a convenience, never the only route.
* ========================================================================== */
/* ---- CORRECTED 8/25/2026: the truncation is gone ------------------------- *
* Author: Sharmila Parthiban.
*
* The rule above this comment used to read:
*
* white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
*
* and it was the wrong trade. It was introduced to make every row exactly one
* line tall so the baselines could not look ragged, and it did achieve that.
* What it cost was the CONTENT: "Chesapeake Drilling & Pump Co." became
* "Chesapeake Drilling & Pu…", a street address lost its town, and a driller
* licence number could disappear entirely. The reported problem became the
* table content, which is a worse defect than the one being fixed — a clerk
* cannot search for what the table will not show them, and an ellipsis in a
* permit record is a value somebody has to open a panel to trust.
*
* Cells wrap now. USWDS tables are designed to wrap: usa-table sets its own
* padding and line-height, the --striped modifier carries row separation, and a
* two-line row under a stripe does not read as misalignment the way a two-line
* row between hairline rules did. The uniform-height argument was solving for a
* table that no longer exists.
*
* .cellone is kept as a class rather than deleted because it is applied at
* eleven call sites and still does something worth doing — it strips the default
* paragraph margin so a two-line cell does not gain a blank line. The title
* attribute at those call sites is also kept: it is now a convenience rather
* than the only route to a truncated value, which is what it should always have
* been. */
#dash-table tbody .cellone{
margin:0;
line-height:1.5;
overflow-wrap:anywhere;
}
/* The chip and the disclosure button sit inside a .cellone, so they must not
introduce height of their own beyond the line box. */
#dash-table tbody .cellone > .chip,
#dash-table tbody .cellone > .dashmore{vertical-align:middle}
/* 24px stays. The one-line rule must not be paid for out of the WCAG 2.2 SC 2.5.8
target size — a 13px line at 1.5 plus the row padding leaves about 29px of row,
so a 24px button fits inside a single-line row and nothing has to give. */
#dash-table tbody .cellone > .dashmore{min-height:24px;padding:0 .35rem}
table.grid--dash thead th{white-space:normal;vertical-align:bottom}
table.grid--dash th,
table.grid--dash td{word-break:break-word;overflow-wrap:anywhere}
table.grid--dash tbody td,
table.grid--dash tbody th{vertical-align:top}
/* Re-targeted 8/25/2026 off `table.grid.grid--fixed`, which no longer matched. */
table.grid--fixed thead th{white-space:normal;vertical-align:bottom}
table.grid--fixed th,
table.grid--fixed td{word-break:break-word;overflow-wrap:anywhere}
/* Vertical alignment matters as much as horizontal on a fixed grid: cells of
very different heights centred against one another read as misaligned even
when the column edges are exact. */
table.grid--fixed tbody td,
table.grid--fixed tbody th{vertical-align:top}
/* ---- the dashboard's secondary lines ---------------------------------- *
* A deliberate, narrow exception to the 13px floor, and it is written down
* here rather than left as a mystery. Every SECONDARY line inside a dashboard
* cell — the driller company under the applicant, the review clock under the
* status, the payment reference — drops to 12px so seven columns of metadata
* fit without the row heights fighting one another.
*
* What keeps it defensible: none of it is the only place the fact appears. The
* primary value in each cell stays at the floor, the record view shows every
* one of these lines at 13px, and nothing here is the sole route to anything —
* the row is a summary of a record that is one click away. It is scoped to
* #dash-table alone; no form, no report and no printed page inherits it. */
#dash-table tbody .hint{font-size:var(--fs-micro);line-height:1.35}
/* ---- the redesigned grid: density, and the disclosure ---------------------- *
* Author: Sharmila Parthiban. 8/24/2026.
*
* "Make font size small" was asked for, and this is the half of it that does not
* cost anything: the type stays at the 13px floor and the AIR comes out instead.
* Row padding drops from .45/.55rem to .3/.5rem and the primary line-height from
* 1.5 to 1.35, which takes roughly a fifth off the height of every row. The other
* half — 12px primary values — is not done here on purpose; see the note in the
* COLUMNS banner and Q18. */
#dash-table thead th,
#dash-table tbody td,
#dash-table tbody th{padding:.3rem .5rem;line-height:1.35}
/* ---- MAKE IT LOOK LIKE A TABLE: LIGHT GREY GRIDLINES ---------------------- *
* Author: Sharmila Parthiban. 8/24/2026, asked for as "make the table as table
* I want the border light grey".
*
* The grid had horizontal rules only — a bottom border per row and nothing
* vertical. That is a fashionable way to draw a table and it is the wrong one
* here, and it is very likely part of why the columns kept being reported as not
* lining up with their headers. WITHOUT VERTICAL RULES THERE IS NOTHING ON SCREEN
* THAT SHOWS WHERE A COLUMN ENDS. The reader infers the boundary from where the
* text happens to start, so a short value in a wide column looks like it belongs
* to the neighbour, and a header centred over a ragged run of values looks
* offset even when the geometry is exact to the pixel. Drawing the boundary makes
* the alignment visible instead of inferred — and it is the cheapest of all the
* fixes attempted for that complaint.
*
* #e2e8f0 for the internal lines: light grey, as asked, and deliberately lighter
* than the --c-line used on the table's outer edge so the frame still reads as the
* frame. Gridlines are structural decoration, so there is no contrast minimum to
* meet — but they must not compete with the text, which is why they are this
* light and not the border colour used everywhere else. */
#dash-table{border:1px solid var(--c-line)}
#dash-table thead th,
#dash-table tbody td,
#dash-table tbody th{border-right:1px solid #e2e8f0}
/* No rule hanging off the right-hand edge — the table's own border is there. */
#dash-table thead th:last-child,
#dash-table tbody td:last-child,
#dash-table tbody th:last-child{border-right:0}
/* The two header rows keep a heavier line under the block so the labels and their
filter boxes read as one unit sitting above the data, not as two more rows. */
#dash-table thead tr:last-child th{border-bottom:2px solid var(--c-line)}
/* The detail panel is one cell spanning the width, so it must not inherit a
vertical rule — a gridline through the middle of a prose panel reads as a
column boundary that is not there. */
#dash-table tbody tr.dashdet__row > td{border-right:0}
/* THE DISCLOSURE BUTTON, SIZED TO WCAG 2.2 SC 2.5.8 TARGET SIZE (MINIMUM).
The criterion asks for 24×24 CSS px. This is the one control in the grid a user
hits on every row, two hundred times a shift, and the old glyph buttons were
2.25rem square only because a 6% column could not hold anything wider. Stated as
a min-height/min-width in px rather than rem so the guarantee does not quietly
fail if the root font size is reduced. */
.dashmore{display:inline-flex;align-items:center;gap:.3rem;
min-height:24px;min-width:24px;padding:.15rem .4rem;
font-family:inherit;font-size:var(--fs-floor);font-weight:600;line-height:1.2;
color:#1e40af;background:#fff;border:1px solid #94a3b8;border-radius:.25rem;
cursor:pointer;text-align:left}
.dashmore:hover{background:#eff6ff;border-color:#1e40af}
/* Was .7rem — an ad-hoc size that belonged to no scale. On the token now, like
everything else. It is a decorative chevron beside a word, so micro is the
right step; the disclosure it sits in still meets the 24px target. */
.dashmore__chev{font-size:var(--fs-micro);line-height:1}
/* Expanded state carries a fill AND the chevron turns AND the words change from
"Show" to "Hide" — three carriers, so the state never rests on colour alone. */
.dashmore[aria-expanded="true"]{background:#1e40af;color:#fff;border-color:#0b1220}
/* ---- the panel ---- *
* Its own type scale and its own layout, deliberately not the grid's: nothing in
* here is competing for column width, so the values can be given room. A CSS grid
* of term/value pairs that collapses to one column on a narrow screen. */
.dashdet__row > td{background:#f8fafc;border-bottom:2px solid var(--c-line);
padding:.6rem .8rem}
.dashdet{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
gap:.5rem 1.25rem;align-items:start}
.dashdet__grp{min-width:0}
.dashdet__h{margin:0 0 .2rem;font-size:var(--fs-floor);font-weight:800;color:#0f172a;
border-bottom:1px solid var(--c-line);padding-bottom:.15rem}
.dashdet__dl{display:grid;grid-template-columns:minmax(7rem,auto) 1fr;
gap:.1rem .6rem;margin:0;font-size:var(--fs-floor)}
.dashdet__dl dt{color:var(--c-ink-muted);font-weight:600}
/* min-width:0 so a long unbroken reference cannot push the value column wider than
its share and reintroduce the very misalignment this redesign removed. */
.dashdet__dl dd{margin:0;min-width:0;overflow-wrap:anywhere;color:#0f172a}
.dashdet__warn{color:#7f1d1d;font-weight:600}
/* ---- the two folded groups inside the panel ---- *
* A whose is styled exactly like the other groups' headings,
* so the panel reads as four equal sections of which two happen to be closed —
* not as two headings and two odd widgets. The marker is the only difference and
* it is the affordance, so it stays. */
.dashdet__fold{min-width:0}
.dashdet__h--fold{cursor:pointer;list-style-position:inside}
.dashdet__h--fold::marker{color:var(--c-ink-muted)}
.dashdet__fold[open] > .dashdet__h--fold{margin-bottom:.2rem}
.dashdet__h--fold:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
/* Closed, the summary is the whole of what the reader gets, so the count lives in
the heading text — "Whose action it is (2 blocking)" — rather than only inside.
A fold that hides its own magnitude makes people open every one to find out
whether it was worth opening. */
/* ---- the generic table toolbar: filters, page size, paging -------------- *
* Added 8/25/2026. The filter row lives inside the thead so it sticks and scrolls
* with the header rather than drifting away from the columns it filters. The inputs
* are sized down hard: a full-width usa-input in every column would make the header
* taller than the rows beneath it. */
/* ==========================================================================
* THE TABLE TOOLBAR AND THE FILTER ROW — presentation pass, 8/26/2026
* Author: Sharmila Parthiban.
*
* WHAT WAS WRONG, and it was not the sizes. The controls were correct and looked
* unfinished, which is its own defect: a screen a county clerk works in all day
* that reads as a developer's scaffold undermines confidence in the data on it.
* Three specific things:
*
* 1. A PERMANENT ROW OF RAW INPUT BOXES IN EVERY COLUMN HEADER. Six to sixteen
* bare text fields sat above every table whether or not anybody was filtering.
* That is the single biggest reason it looked industrial — it put the machinery
* of the page in front of the content. The row is now BEHIND A TOGGLE and closed
* by default, so the table leads with its data and the filters appear when asked
* for. The toggle carries a count when filters are active, so a hidden filter can
* never be silently narrowing the results.
*
* 2. THE CONTROLS WERE A LOOSE RUN OF ELEMENTS. A label, a select, a pager and a
* sentence, all floating on the page background with nothing saying they belonged
* together. They are one strip now — a bordered, rounded bar with the count on
* the left and the controls on the right, which is where a reader expects to find
* each.
*
* 3. NOTHING SHOWED WHICH COLUMN WAS FILTERING. An input with two characters in it
* looks like an empty input at a glance, so a narrowed table looked like a table
* with missing rows. An active filter now carries a blue border and a tinted
* fill, and a Clear button appears beside the toggle.
*
* Colours are USWDS tokens rather than new ones: #005ea2 primary for the active
* state, #f0f0f0 base-lightest for the bar. Nothing here introduces a colour the
* design system does not already use.
* ========================================================================== */
.tblx__bar{
display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
margin:.5rem 0;padding:.35rem .5rem;
background:#f0f0f0;border:1px solid #dfe1e2;border-radius:.35rem;
}
/* The count goes first and takes the slack, which pushes every control to the right
edge as one group instead of leaving them scattered mid-bar. */
.tblx__note{font-size:var(--fs-floor);color:#454545;flex:1 1 auto;min-width:8rem}
.tblx__pager{display:inline-flex;align-items:center;gap:.15rem}
.tblx__spacer{flex:0 0 1px;align-self:stretch;background:#dfe1e2;margin:0 .15rem}
/* ---- the filter toggle, and the clear button beside it ------------------- */
/* ==========================================================================
* ONE CONTROL HEIGHT ACROSS THE WHOLE TOOLBAR — 8/26/2026
*
* The controls were not aligned and the reason was arithmetic, not layout. The
* pager was raised to 2rem (32px) while the select, the toggle and the clear button
* were left at 1.75rem (28px), so the bar held two control heights side by side.
* align-items:center then centred a 28px control against a 32px one, which puts
* their borders 2px out at top and bottom — visible, and exactly the kind of
* near-miss that reads as sloppy rather than as a bug.
*
* --ctl-h is declared once and every control in the bar uses it. Changing the
* height of the toolbar is now one number, and nothing can be left behind.
*
* THE LABEL IS CENTRED AGAINST ITS CONTROL, not baseline-aligned to it. USWDS puts
* a label above its input, which is right in a form and wrong in a toolbar: inline,
* a label sitting on the text baseline of a bordered control appears to float above
* centre because the control's border extends below the baseline. Centring the flex
* item is what makes "Rows" line up with the box beside it.
* ========================================================================== */
.tblx__bar{ --ctl-h:2rem; }
/* Every direct child sits on the centre line. line-height is normalised too: a
control inheriting 1.35 from the page and one setting 1 of its own are different
heights even when both are told to be --ctl-h. */
.tblx__bar > *{align-self:center}
.tblx__bar label{
display:inline-flex;align-items:center;height:var(--ctl-h);
margin:0;line-height:1;white-space:nowrap;
}
.tblx__toggle{
display:inline-flex;align-items:center;justify-content:center;gap:.3rem;
font-family:inherit;font-size:var(--fs-micro);font-weight:600;line-height:1;
height:var(--ctl-h);padding:0 .5rem;cursor:pointer;
color:#005ea2;background:#fff;border:1px solid #a9aeb1;border-radius:.25rem;
/* Border included in the height, or a 1px border makes this control 2px taller
than the select beside it and the alignment goes again. */
box-sizing:border-box;
}
.tblx__toggle:hover{background:#f0f6fb;border-color:#005ea2}
.tblx__toggle:focus-visible{outline:3px solid #1b1b1b;outline-offset:2px}
/* Pressed state is a real change of fill, not only a border — a toggle whose only
"on" signal is a 1px border reads as off. */
.tblx__toggle[aria-expanded="true"]{background:#005ea2;color:#fff;border-color:#005ea2}
/* The count of active filters. It rides on the toggle so the number is attached to
the control that reveals what it counts. */
.tblx__count{
display:inline-block;min-width:1.1rem;padding:0 .25rem;
font-size:var(--fs-micro);font-weight:700;line-height:1.3;text-align:center;
color:#fff;background:#b50909;border-radius:.6rem;
}
/* ---- the filter row itself ---------------------------------------------- */
/* Hidden by the hidden ATTRIBUTE, so it leaves the accessibility tree too — a
collapsed filter row that a screen reader still walks through is sixteen inputs
the user was told were not there. */
.tblx__filters th{
padding:.25rem .3rem !important;
background-color:#f0f6fb;
border-top:2px solid #005ea2;
}
.tblx__f{
font-size:var(--fs-micro) !important;
padding:.2rem .35rem !important;
height:auto !important;line-height:1.3 !important;
width:100% !important;min-width:3rem;
border:1px solid #a9aeb1 !important;border-radius:.25rem !important;
background:#fff;
}
.tblx__f:focus{outline:3px solid #1b1b1b;outline-offset:1px;border-color:#005ea2 !important}
/* ACTIVE: set by script when the box has content. Border AND fill, because a
colour-only change at 1px is not a change anybody sees. */
.tblx__f--on{
border:2px solid #005ea2 !important;background:#e7f2fa !important;font-weight:600;
}
/* ==========================================================================
* THE PAGER AND THE PAGE-SIZE BOX, SIZED FOR A TOOLBAR
* Author: Sharmila Parthiban. 8/25/2026.
*
* USWDS ships pagination at 1.13rem — 18px — with 2.5rem (40px) targets, 1rem of
* margin above and below, and justify-content:center. Those are the right values
* for a pagination bar that is the main control at the foot of a page of search
* results. They are wrong for a strip of chrome above a reference table, where the
* pager is not the point of the screen: it took two lines, centred itself away from
* the controls beside it, and was the largest type in the toolbar.
*
* WHERE THE SHRINKING STOPS, AND WHY IT STOPS THERE. 1.75rem is 28px, which clears
* the 24×24 CSS px floor of WCAG 2.2 SC 2.5.8 Target Size (Minimum) with 4px to
* spare. That floor is honoured elsewhere in this file — the row-detail disclosure
* is explicitly held at 24px — and a pager is exactly the kind of control that gets
* pressed repeatedly, often on a touch screen, by somebody working through a queue.
* "Small" was the instruction; below 24px it stops being a size choice and becomes
* an accessibility failure, so it stops at 28.
*
* The type goes to --fs-micro, 12px, which is this file's chips-and-badges step. A
* page number is a badge: two or three characters, read at a glance, never prose.
* The four-colour contrast requirement still applies and USWDS's #005ea2 on white
* is 6.72:1, so shrinking it costs nothing there.
* ========================================================================== */
.tblx__bar .usa-pagination,
#dash-pager .usa-pagination{
margin:0;
font-size:var(--fs-micro);
line-height:1.2;
justify-content:flex-start;
background:transparent;
}
.tblx__bar .usa-pagination__item,
#dash-pager .usa-pagination__item{
/* 2rem = 32px, the shared --ctl-h. Above the 24px SC 2.5.8 floor with room, and
the same height as every other control in the bar so the borders line up. */
height:var(--ctl-h, 2rem);
min-width:var(--ctl-h, 2rem);
margin-left:.1rem;
margin-right:.1rem;
}
.tblx__bar .usa-pagination__button,
#dash-pager .usa-pagination__button{
padding:.15rem .35rem;
border-radius:.25rem;
background:#fff;
}
.tblx__bar .usa-pagination__button:hover,
#dash-pager .usa-pagination__button:hover{background:#f0f6fb;border-color:#005ea2}
/* THE CURRENT PAGE IS FILLED, not merely bordered. USWDS marks it with a heavier
bottom border, which at this size is two pixels of difference and easy to miss —
so "which page am I on" became a question. Filled reads instantly, and the text
goes white for 6.72:1 against #005ea2. aria-current carries it for a screen
reader either way. */
.tblx__bar .usa-pagination__button.usa-current,
#dash-pager .usa-pagination__button.usa-current{
background:#005ea2;color:#fff;border-color:#005ea2;font-weight:700;
}
.tblx__bar .usa-pagination__overflow,
#dash-pager .usa-pagination__overflow{padding:.15rem .2rem}
/* The arrow labels are the widest thing in the pager. On a toolbar the icon plus
the accessible name is enough, so the visible word is dropped below tablet width
and kept on a wide screen where there is room for it. */
.tblx__bar .usa-pagination__link,
#dash-pager .usa-pagination__link{padding:.15rem .35rem;gap:.15rem}
.tblx__bar .usa-icon,
#dash-pager .usa-icon{width:1rem;height:1rem}
@media (max-width:1023px){
.tblx__bar .usa-pagination__link-text,
#dash-pager .usa-pagination__link-text{
/* Visually hidden, not display:none — the arrow keeps its accessible name. */
position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
white-space:nowrap;
}
}
/* The page-size box. It holds "10", "25" or "All (24)" — four characters at most —
so a control sized for an address is four times wider than it needs to be. The
USWDS chevron needs room on the right, hence the padding rather than a bare
width. Height matches the pager buttons so the toolbar sits on one line. */
.tblx__bar .usa-select,
#dash-page-size{
font-size:var(--fs-micro) !important;
height:var(--ctl-h, 2rem) !important;
line-height:1 !important;
padding:0 1.6rem 0 .4rem !important;
width:auto !important;
min-width:5.5rem;
background-size:.7rem;
box-sizing:border-box !important;
/* USWDS gives a select a top margin for stacked form layout. In a toolbar that
pushes it below the label beside it. */
margin:0 !important;
}
/* Their labels shrink with them, or the label is larger than the control it names. */
.tblx__bar .usa-label,
label[for="dash-page-size"]{
font-size:var(--fs-micro);margin:0;
display:inline-flex;align-items:center;height:var(--ctl-h, 2rem);line-height:1;
white-space:nowrap;
}
/* The dashboard's own toolbar gets the same variable and the same centring, so the
grid's controls and the fifteen other tables' controls are one design rather than
two that happen to look similar. */
#dash-page-size, #dash-pager{ --ctl-h:2rem; }
#dash-pager{display:inline-flex;align-items:center;gap:.15rem}
.tblx__filters th{padding:.2rem .25rem !important;background-color:#eef2f7}
.tblx__f{font-size:var(--fs-micro) !important;padding:.15rem .3rem !important;
height:auto !important;width:100% !important;min-width:3rem}
@media print{ .tblx__bar,.tblx__filters{display:none} }
/* ---- SDAT property search, and the well-history results ---------------- */
.propsearch__res{max-height:22rem;overflow-y:auto}
.propsearch__hit{border:1px solid var(--c-line);border-radius:.375rem;
padding:.4rem .5rem;margin:.35rem 0;background:#fff}
.propsearch__hit:hover{background:#f8fafc}
/* A legacy record is marked, never merely ordered differently. The left rule and
the tag both say it, because a reader scanning a list of wells has to be able to
tell a permit this system issued from one imported out of SDWIS — the second
kind cannot be opened, corrected or acted on here. */
.wellhist__legacy{border-left:4px solid #92400e;background:#fffbeb}
.wellhist__current{border-left:4px solid #166534}
.dashdet__foldn{font-weight:600;color:var(--c-ink-muted)}
/* The click cue on a collapsed group. Styled as a small affordance rather than
prose: it is a hint attached to the control, not a sentence to read. It is
no-print because on paper there is nothing to click and the groups print open. */
.dashdet__cue{font-size:var(--fs-micro);font-weight:600;color:var(--c-primary);
border:1px solid var(--c-primary);border-radius:.25rem;padding:0 .3rem;
margin-left:.35rem;white-space:nowrap}
@media print{ .dashdet__cue{display:none} }
@media print{
/* On paper there is no clicking, so both folds print open. */
.dashdet__fold > .dashdet__dl{display:grid !important}
.dashdet__h--fold{list-style:none}
}
.dashdet__ul{margin:.1rem 0 0;padding-left:1.1rem}
.dashdet__ul li{margin:0 0 .1rem}
.dashdet__ul--forms{list-style:none;padding-left:0}
.dashdet__code{display:inline-block;min-width:2.6rem;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700}
.dashdet__state{font-weight:700}
/* PRINT. The panels that are OPEN print, and the disclosure buttons do not — a
button is meaningless on paper.
What this deliberately does NOT do is force the closed rows visible. `hidden`
could be overridden here with display:table-row !important, and it would print
a run of empty grey bands: the panel's contents are built on first open, so a
row that was never opened has an empty cell to show. Rather than pre-build two
hundred panels to make a CSS rule true, "Expand all details" below the grid
opens them for real, and printing after that gives a complete document. */
@media print{
.dashdet__row > td{background:#fff !important}
.dashmore{display:none !important}
}
/* The min-width is what keeps the fix honest on a narrow screen. Percentage
columns of a 100%-wide table divide whatever space there is, so on a phone a
13% column becomes about 48px — the header wraps to five lines and the
alignment is technically perfect and practically unreadable. Below 52rem the
table stops shrinking and .tbl-wrap scrolls sideways instead, which is the
right trade: a scrollbar is a known gesture, a crushed column is not. The
percentages still resolve against the used width, so the proportions above
hold whether the table is scrolled or not.
On paper there is no scrollbar to offer, so the floor is dropped and the
table is allowed to fit the page — see the print block below. */
/* ---- misc ------------------------------------------------------------ */
.leafmap{height:260px;border:1px solid var(--c-line);border-radius:.375rem;z-index:0}
.step-node{display:flex;flex-direction:column;align-items:center;gap:.25rem;flex:1}
.step-dot{width:2rem;height:2rem;border-radius:999px;display:grid;place-items:center;
font-weight:800;font-size:var(--fs-micro);line-height:1;
background:#e2e8f0;color:#475569;border:2px solid #cbd5e1}
.step-node[data-state="active"] .step-dot{background:var(--c-primary);color:#fff;border-color:var(--c-primary-dark)}
.step-node[data-state="done"] .step-dot{background:var(--c-form-green);color:#fff;border-color:#14532d}
/* ---- step review accordion (last step of a stepped form) -------------- *
* A native /: keyboard operable, announced as expanded or
* collapsed, and it works with JavaScript disabled. The status chips carry an
* icon and a word as well as a hue, so a greyscale print or a colour-blind
* reader loses nothing. Both chip colours are AA against their fill. */
.stepsum{border:1px solid var(--c-line);border-radius:.375rem;margin-bottom:.5rem;background:#fff}
.stepsum__hd{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
padding:.45rem .6rem;cursor:pointer;font-weight:600;list-style:none}
.stepsum__hd::-webkit-details-marker{display:none}
.stepsum__hd::after{content:'▸';color:#64748b;font-size:var(--fs-micro)}
.stepsum[open] > .stepsum__hd::after{content:'▾'}
.stepsum__hd:focus-visible{outline:3px solid var(--c-primary);outline-offset:1px}
.stepsum__bd{padding:.6rem;border-top:1px solid #e2e8f0}
.chip--ok{background:#dcfce7;color:#14532d;border:1px solid #14532d}
.chip--warn{background:#fee2e2;color:#991b1b;border:1px solid #991b1b}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:6px}
::-webkit-scrollbar-track{background:#e2e8f0}
.modal-back{position:fixed;inset:0;background:rgba(15,23,42,.6);z-index:60;display:none;
align-items:flex-start;justify-content:center;padding:2rem 1rem;overflow:auto}
.modal-back.open{display:flex}
/* ---- CORRECTED 8/25/2026: this pair was overriding the responsive clamp ---- *
* Author: Sharmila Parthiban.
*
* .modal and .modal--lg are declared TWICE in this stylesheet — once earlier with a
* min() clamp added when the page was made to fit a tablet, and again here with the
* original flat max-width. This pair is later in source order at the same
* specificity, so THIS pair won and the clamp did nothing: a large dialogue stayed
* 66rem — 1056px — and overflowed the window on any tablet in portrait, putting its
* own right-hand edge and buttons off screen. That is most of what was reported as
* the popup not being clear: it was wider than the screen it was on.
*
* The clamp is folded in HERE rather than by deleting this rule, because this is
* the declaration carrying the fill, the radius and the shadow.
*
* A HEIGHT LIMIT TOO, which neither declaration had. A dialogue taller than the
* viewport had no scroll of its own — .modal-back scrolls, but that moves the whole
* dialogue including its heading, so a reader scrolling to a button loses the title
* that says what they are deciding about. Now the header stays and the body
* scrolls, so the title and the close button are visible however long the content
* is. overscroll-behavior:contain stops a flick at the end of the list scrolling
* the page behind the dialogue. */
.modal{background:#fff;border-radius:.5rem;width:100%;
max-width:min(44rem, calc(100vw - 1.5rem));
max-height:calc(100vh - 4rem);
display:flex;flex-direction:column;
box-shadow:0 20px 40px rgba(0,0,0,.3)}
.modal--lg{max-width:min(66rem, calc(100vw - 1.5rem))}
/* The header is the first child and does not scroll; the body is the last child
and does. Structural selectors rather than new classes, so the twelve existing
modal shells need no markup change. */
.modal > :first-child{flex:0 0 auto}
.modal > :last-child{overflow-y:auto;overscroll-behavior:contain}
/* ---- print ------------------------------------------------------------ *
* THE DEFECT THIS FIXES: a printed form came out with its title, kicker and
* subtitle missing. They were not missing — they were white on white.
*
* Every dark band on this page carries white text, and the contrast comes from
* the FILL. Print pipelines drop background colours by default, so the fill
* goes and the white text stays, and the heading vanishes off the page. It is
* the worst kind of defect because the screen looks right and only the paper
* is wrong, so nobody sees it until a county has already filed the copy.
*
* The fix re-inks rather than asking for the background back. `print-color-
* adjust:exact` would work in theory, but it is routinely overridden by the
* driver, by the "background graphics" tick in the browser dialogue, and by
* every office printer set to draft — so a page that depends on it is a page
* that is legible only sometimes. Dark ink on white paper is legible always,
* and it uses a fraction of the toner. */
@media print{
.no-print{display:none !important}
body{background:#fff;font-size:11pt}
.sec{break-inside:avoid}
/* Panels whose contrast came from a dark fill. The descendant rule is what
brings back text-slate-300 and text-slate-400 sub-lines, which are legible
on slate-800 and invisible on paper. */
.bg-slate-800,.bg-slate-900,.bg-blue-900,.gis,.gis__hd{
background:#fff !important;border:1px solid #1b1b1b !important}
.bg-slate-800 *,.bg-slate-900 *,.bg-blue-900 *,.gis *{color:#1b1b1b !important}
/* Filled controls and chips. A chip keeps its outline so it still reads as a
chip in greyscale — the status word inside it is the meaning, and the word
survives, but a chip with no edge reads as loose text. */
.btn-primary,.btn-danger,.btn-inverse,.btn-gis,.chip{
background:#fff !important;color:#1b1b1b !important;border:1px solid #1b1b1b !important}
/* Table headers lose their fill too, so the rule under them has to be the
thing that separates header from data. */
/* Re-targeted to .usa-table on 8/25/2026. Every rule in this print block was
written for `table.grid` and matched nothing after the USWDS conversion, so
printed tables had silently lost ALL of it: the header kept a grey fill that
the printer either drops or wastes toner on, the sticky header stayed sticky
and printed once instead of repeating, the fixed-layout floor kept forcing a
960px table onto a portrait page, and rows split across page breaks. None of
that throws an error — it just comes out wrong on paper, which is the failure
mode this whole block exists to prevent. */
.usa-table thead th{background:#fff !important;border-bottom:2px solid #1b1b1b !important}
/* Sticky is meaningless on paper and, in some engines, it prints the header
once over the first rows instead of at the top of each page. */
.usa-table thead{position:static !important}
/* A printed page cannot be scrolled sideways, so anything past the right
margin is simply lost. The 52rem floor that protects the fixed-layout
Blueprint tables on a narrow screen has to come off here and let them fit
the paper; the percentage column widths keep the proportions, so the
headers stay over their own data at whatever width the page allows.
thead is also asked to repeat on every page — a twelve-row table that
breaks across a page boundary otherwise leaves the second half unlabelled. */
table.grid--fixed{min-width:0 !important}
.usa-table thead{display:table-header-group}
.usa-table tr{break-inside:avoid;page-break-inside:avoid}
/* The scroll container must not clip on paper either — there is no scrollbar to
offer, so an overflow box would simply cut the table off at the margin. */
.usa-table-container--scrollable{overflow:visible !important;max-width:none !important}
/* A package tile prints as black on white like everything else. Its state is
carried by the glyph SHAPE and by the sentence in the list beside it, so
losing the colour costs nothing — which is the test every piece of colour
coding in this file has to pass. */
.pkgt{color:#1b1b1b !important;background:#fff !important}
.pkgl > li{break-inside:avoid;page-break-inside:avoid}
/* A bucket must not be split across a page — "Yours to do now (2)" on one
sheet and its two rows on the next is worse than starting a page early.
A folded bucket prints folded, as every other in this file does,
which is why each heading carries its own count: a printed "Done — filed
or waived (6)" still states the fact even with the six rows folded away,
and the tile strip above the list shows all eleven regardless. */
.pkgg{break-inside:avoid;page-break-inside:avoid;background:#fff !important;
border-color:#1b1b1b !important}
details.pkgg > summary.pkgg__hd::before{content:'' !important;margin:0 !important}
/* THE ONE PLACE AN ICON IS NOT ENOUGH. On paper nobody can hover a tooltip or
click a modal, so a printed dashboard row would show a glyph and a number
and no way to find out what they meant. Both icon buttons therefore print
as their own text: the count keeps its meaning, the dot goes (it never
carried anything on its own), and .gicon__print — hidden on screen,
revealed here — spells the cell out beside it. */
.gicon{background:#fff !important;color:#1b1b1b !important;
min-width:0 !important;min-height:0 !important;padding:0 !important;border:0 !important}
.gicon__dot{display:none !important}
.gicon__print{display:inline !important}
}
|