/* ============================================================================ wands-prototype.css — the design contract carried over from the prototype Author: Sharmila Parthiban. 26 August 2026. Source: Final_Delivery_2026-08-24/01_Prototype/mde-well-portal-final.html (26 Aug 2026, 20,444 lines) — the current prototype. WHICH PROTOTYPE FILE. There are eight copies of the portal HTML in the repo. This file follows the one above. The nearest other copy, Final Prototype/01_Prototype/mde-well-portal.html, is 24 Aug / 17,401 lines and predates the USWDS conversion: its status chips are Tailwind utilities (bg-slate-200 text-slate-800) loaded from a CDN, its headings are Merriweather serif from Google Fonts, it has no overflow-x correction, and it has neither REJECTED nor PETITION_FILED. Following that copy instead would reintroduce the CDN dependency this stylesheet exists to remove. The two agree on the dashboard column widths, so those are settled either way. WHAT THIS FILE IS. Not a theme. It is the set of rules the prototype arrived at after the dashboard was reported misaligned five times, plus corrections for four places where a dependency is wrong rather than absent. Everything in here has a reason recorded beside it, because every one of these rules has already been removed once by somebody who could not see why it was there. LOAD ORDER. Loaded LAST, after mdwds.min.css and site.css. Where a rule has to beat USWDS it does so on SPECIFICITY, not on load order and not with !important — so it keeps working if the order changes. WHO LOADS IT — all four layouts, as of 28 August 2026: _LayoutWithImage.cshtml the live journey: dashboard, all five Green Form steps, all five Yellow Form steps, sign-in, register, payment, AccessDenied, NotFound _Layout_Forgotpwd.cshtml the password screens _LayoutDesign.cshtml the /design reference pages _Layout.cshtml the Bootstrap-era screens — Profile, the three User screens, the three payment-result screens. THIS CONTRACT ONLY, deliberately not mdwds.min.css: those seven views are 100% Bootstrap markup with not one `usa-` class between them, and putting a second full design system on top of Bootstrap makes the two fight over body, a, h1-h6, table, button and input. The .usa-* selectors below simply do not match Bootstrap's .table, so they are inert there rather than harmful, and those pages stop being a visibly different size and typeface from the rest. The five CDN references that used to sit in the two real layouts are gone with it — that was US-K93, and the two Maryland wordmark SVGs are now vendored in wwwroot/img. The acceptance test is not a code review: pull the network cable out, load a page, and see whether it still looks right. NO CDN, NO WEBFONT. Public Sans is named first and falls back through the system stack. Nothing here fetches anything. That is the whole point: the layout this attaches to previously loaded three files from hosts the MDE network does not answer. ============================================================================ */ /* --------------------------------------------------------------------------- 1. BOX MODEL — declared, not inherited. The prototype had no box-sizing rule anywhere; it inherited border-box from Tailwind's Preflight, which arrived from a CDN. When the CDN did not answer, every padded element silently changed size. Declare it. --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* --------------------------------------------------------------------------- 2. ONE TYPE SCALE. 16 / 14 / 13 px, and these tokens are the only source of a font size for the application. USWDS sets 18px inside eight of its own components; the rules below bring those back onto the scale. RAISED 30 AUGUST 2026, on the instruction that all text must be legible. The scale was 14 / 13 / 12. It is now 16 / 14 / 13, with headings moved up in step. THIS IS NOT A REVERSAL OF THE EARLIER DECISION, AND THE HISTORY MATTERS BECAUSE SOMEBODY WILL OTHERWISE PUT IT BACK. The original note recorded that the size had been raised to 18 and then 16 and was reported as "font is too big" twice, plus "inconsistent font size" once — and concluded, correctly, that the complaint was about CONSISTENCY rather than absolute size: three font families at five different sizes reads as broken whatever the numbers are. That diagnosis still stands, and this change does not touch it. One family and one scale are still the rule; the scale has simply been shifted up as a whole, which is a different change from the piecemeal raises that were rejected. WHY 16px FOR BODY. It is the browser default, so a user who has not changed anything gets what every other site gives them, and — more to the point — a user who HAS raised their default in the OS or the browser gets the benefit, because every value here is in rem. At 0.875rem the application was quietly overriding that preference downward on every page. WHY 13px IS NOW THE FLOOR AND NOT 12px. 12px was reserved for chips and badges, which sounds harmless until you notice that a status chip is the one thing on the dashboard a clerk reads on every single row. Nothing in the application is now below 13px, and running text is never below 16px. WCAG 2.1 sets no minimum font size — that is a common misreading — but it does require text to survive 200% zoom without loss of content (1.4.4) and 400% reflow (1.4.10). A rem-based scale satisfies both; a px-based one does not. The reason to raise it is legibility for the people using it, not a citation. HOW TO TUNE IT. Change these six values and nothing else. Every size in the application derives from them, so the scale cannot drift out of proportion by editing one rule in one component — which is exactly how it drifted before. --------------------------------------------------------------------------- */ :root { /* SCALE, 31 Aug 2026: taken back down after "too big". This is the settled scale — do not raise it again. It reads at 14px body, the density the application was designed around, and the whole point remains CONSISTENCY: one family, one scale, every size derived from these six tokens. The 16px experiment overshot; 14/13/12 with proportional headings is the balance. */ --wands-fs-body: 0.875rem; /* 14px — running text and primary values */ --wands-fs-floor: 0.8125rem; /* 13px — hints and secondary lines */ --wands-fs-micro: 0.75rem; /* 12px — chips and badges ONLY, the floor */ --wands-fs-h1: 1.375rem; /* 22px */ --wands-fs-h2: 1.125rem; /* 18px */ --wands-fs-h3: 1rem; /* 16px */ --wands-lh-body: 1.5; --wands-lh-tight: 1.25; /* One control height, so a toolbar's select, its toggle and its pager all share a baseline. Two heights in one bar put their borders 2px out and that was reported as "paging rows and controls are not aligned". */ --wands-ctl-h: 2rem; --wands-ink: #1b1b1b; --wands-ink-soft: #565c65; --wands-line: #dfe1e2; } /* --------------------------------------------------------------------------- 3. ONE FONT FAMILY, ON EVERYTHING. The prototype ran three families: Inter for body, Merriweather for headings, and USWDS's own inside its components. Two of the three came from Google Fonts and fell back silently off the network — Merriweather to Georgia and Inter to system-ui — so headings and body text changed relationship depending on whether the machine could reach fonts.googleapis.com. NOTE ON THE PROTOTYPE, 26 Aug 2026. The prototype states this rule and then contradicts it: it declares one stack on everything at line 430 and, twelve lines later, resets `h1,h2,h3,.serif` to Merriweather/Georgia serif. Equal specificity, later in the file, so the serif wins and headings are still CDN-dependent there. This file implements the STATED intent — one family — because that is the decision that was made and recorded. The prototype needs the same one-line deletion. --------------------------------------------------------------------------- */ /* THE STACK IS NOT WRITTEN OUT HERE — it is var(--font-sans) from tokens.css. It used to be a second literal copy, and that made this rule a SILENT OVERRIDE rather than a restatement. tokens.css only declares font-family on and lets everything inherit; this selector list names h1-h6, button, input, select and textarea EXPLICITLY, and an explicit declaration always beats inheritance no matter which file loaded first. So every heading and every form control on the site was taking its face from this line and not from the token — and editing the token alone would have changed the body copy while leaving headings and buttons on the old stack, on the same page. Referring to the variable keeps the reach of this rule (which is the point of it: USWDS ships its own family inside .usa-* components and this is what stops that showing through) while leaving exactly ONE place where the typeface is chosen. Custom properties resolve from :root regardless of file order, so it does not matter that tokens.css is linked after this file. */ html, body, button, input, select, textarea, optgroup, h1, h2, h3, h4, h5, h6, .usa-table, .usa-tag, .usa-label, .usa-legend, .usa-input, .usa-select, .usa-textarea, .usa-button, .usa-hint, .usa-prose { font-family: var(--font-sans); } body { color: var(--wands-ink); font-size: var(--wands-fs-body); line-height: var(--wands-lh-body); /* Tabular figures so permit numbers, fees and dates line up in a column instead of a 1 being half the width of a 0. */ font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { line-height: var(--wands-lh-tight); } body h1 { font-size: var(--wands-fs-h1); } body h2 { font-size: var(--wands-fs-h2); } body h3 { font-size: var(--wands-fs-h3); } /* USWDS components that each declare their own 18px, brought onto the scale. Listed explicitly rather than reset globally so that anything not named here keeps the design system's own value. */ .usa-table, .usa-alert__text, .usa-summary-box__text, .usa-prose, .usa-accordion__content, .usa-card__body, .usa-legend, .usa-label, .usa-input, .usa-select, .usa-textarea { font-size: var(--wands-fs-body); } .usa-hint, .usa-error-message { font-size: var(--wands-fs-floor); } .usa-tag { font-size: var(--wands-fs-micro); } /* TABLET: the body scale does NOT change, and that is deliberate — a tablet is held further from the eye than a laptop, so taking 14/13/12 down to 13/12/11 would make it harder to read on the device where reading is already harder. Density comes from padding instead: the same rows fit, at the same size, by spending the whitespace rather than the type. Headings do come down one step, because a 22px h1 that is right on a 1600px page is oversized on a 768px one and a heading has size to spare. From mde-well-portal-final.html lines 622-630. */ @media (max-width: 1023px) { /* Realigned 31 Aug 2026 to the 22px desktop h1: tablet headings step down one notch to 20px / 17px. Body/floor/micro are deliberately NOT overridden — density on a tablet is bought with padding, never with type size. */ :root { --wands-fs-h1: 1.25rem; --wands-fs-h2: 1.0625rem; } #applicationsTable thead th, #applicationsTable tbody td, #applicationsTable tbody th { padding: .25rem .35rem; } } /* --------------------------------------------------------------------------- 4. THE SCROLLABLE TABLE CONTAINER — a bug in MDWDS, corrected locally. wwwroot/css/mdwds.min.css declares: .usa-table-container--scrollable{margin:1.25rem 0;overflow-y:hidden} There is no overflow-x. USWDS 3 upstream sets overflow-x:auto — that is the entire point of a class called "scrollable" — and this build omits it. So the container never scrolled, and a table with a min-width pushed the whole PAGE sideways instead of scrolling inside its own box. On a 768px tablet that is a 960px table dragging a horizontal scrollbar onto the document, which is exactly what "it does not fit the window" meant. THIS RULE MUST NOT BE REMOVED when anything is upgraded. It is the one rule here that exists because a dependency is WRONG rather than absent, so it will look redundant to anyone who checks the upstream source instead of the vendored file. --------------------------------------------------------------------------- */ .usa-table-container--scrollable { overflow-x: auto; /* NO overflow-y. Leaving it unset keeps it `visible`, so the container grows to whatever it holds and the PAGE scrolls. Setting it to hidden — which is what MDWDS does and what I copied once — means a box that can neither grow nor scroll downwards, so an expanded row detail is clipped at the fold and appears to overlap the rows beneath it. The grid looks broken precisely when it is doing the right thing. */ max-width: 100%; -webkit-overflow-scrolling: touch; } /* USWDS's own nowrap inside a scroll container, overridden. .usa-table-container--scrollable td{white-space:nowrap} forces every cell in the container onto one line. Reported as "text is not wrapped it is going outside the table", and it is why removing our own nowrap rule had no effect. Beaten on specificity — 0,2,1 against their 0,1,1 — not with !important. */ .usa-table-container--scrollable .usa-table td, .usa-table-container--scrollable .usa-table th { white-space: normal; } /* --------------------------------------------------------------------------- 5. TABLE CELLS ALIGN TO THE TOP. Asked for directly: "always valign top for table data". With cells centred, the values in a five-line-tall row start at five different heights and the row reads as misaligned even though every border is exactly where it should be. Header cells stay bottom-aligned so a two-line column label sits against the data it names. --------------------------------------------------------------------------- */ .usa-table tbody th, .usa-table tbody td, .usa-table tfoot th, .usa-table tfoot td { vertical-align: top; } .usa-table thead th { vertical-align: bottom; white-space: normal; } /* USWDS sets `.usa-table th{background-color:#dfe1e2}` — on `th`, not on `thead th` — so a leading each body row came out DARKER than the column headers above it. Reported as "fix the grid and tables colour of header consistent". Row headers get their own lighter fill. */ .usa-table tbody th { background-color: #f7f9fa; font-weight: 600; } /* --------------------------------------------------------------------------- 6. TOOLBAR CONTROLS SHARE ONE HEIGHT. --------------------------------------------------------------------------- */ .wands-tblbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0; font-size: var(--wands-fs-floor); } .wands-tblbar select, .wands-tblbar .usa-button, .wands-tblbar button { height: var(--wands-ctl-h); min-height: var(--wands-ctl-h); padding-top: 0; padding-bottom: 0; font-size: var(--wands-fs-floor); margin: 0; } .wands-tblbar__count { margin-left: auto; color: var(--wands-ink-soft); } /* Pager targets. WCAG 2.2 SC 2.5.8 asks for 24x24 CSS px; 2rem is 32px, above the floor on purpose because a 24px target is the minimum and not the goal. */ .usa-pagination__button, .usa-pagination__link { min-width: 2rem; min-height: 2rem; } /* --------------------------------------------------------------------------- 7. THE STATUS CHIP — usa-tag with a USWDS background token, from mde-well-portal-final.html statusChip() at lines 13102-13126. Every colour measured against the tag's white text: lowest 4.59:1 (accent-warm-dark, warning-darker), highest 13.60:1 (primary-darker). Two distinctions the colours carry, and each is why a separate token was needed rather than reusing one: REJECTED is secondary-dark (#822133, 9.48:1) — visibly a refusal, and visibly NOT the same refusal as DENIED's error-dark red. Administrative turn-back is not a ruling on the well. RETURNED_FOR_EDIT is accent-warm-dark, the same family as the other "your move" states, because it wants something from the APPLICANT. It is not a refusal and must not read as one. Colour is never the only carrier: the tag always contains the status WORD. Not typed in capitals in the markup — usa-tag uppercases visually via text-transform, and literal capitals are read letter by letter by some screen reader configurations. --------------------------------------------------------------------------- */ .usa-tag.bg-base { background-color: #71767a; } .usa-tag.bg-base-dark { background-color: #565c65; } .usa-tag.bg-base-darker { background-color: #3d4551; } .usa-tag.bg-primary { background-color: #005ea2; } .usa-tag.bg-primary-dark { background-color: #1a4480; } .usa-tag.bg-primary-darker { background-color: #162e51; } .usa-tag.bg-accent-warm-dark{ background-color: #936f38; } .usa-tag.bg-warning-darker { background-color: #936f38; } .usa-tag.bg-success-darker { background-color: #216e1f; } .usa-tag.bg-error-dark { background-color: #b50909; } .usa-tag.bg-secondary-dark { background-color: #822133; } .usa-tag.bg-info-darker { background-color: #2e6276; } .usa-tag[class*="bg-"] { color: #fff; } /* --------------------------------------------------------------------------- 8. THE DASHBOARD GRID. Five word columns, widths summing to exactly 100%. table-layout stays AUTO, not fixed: header and body are in one table, so the browser computes one set of widths for both. Under `fixed` a column never grows to fit and content overflows sideways into its neighbour while the header stays over the declared edge — that was the original misalignment, and it is why moving percentages around could never fix it. --------------------------------------------------------------------------- */ #applicationsTable { table-layout: auto; border: 1px solid var(--wands-line); } #applicationsTable thead th, #applicationsTable tbody td, #applicationsTable tbody th { padding: .3rem .5rem; line-height: 1.35; } /* Sticky header, worth having because the PAGE scrolls rather than a fixed-height box: the header pins to the top of the viewport as the page moves. */ #applicationsTable thead th { position: sticky; top: 0; z-index: 2; } #applicationsTable .wands-sub { display: block; font-size: var(--wands-fs-micro); line-height: 1.35; color: var(--wands-ink-soft); } /* The per-row detail panel. Force-collapsed by the view on every render, not merely closed by default. */ .wands-rowdetail { margin: .25rem 0 0; font-size: var(--wands-fs-floor); } .wands-rowdetail > summary { cursor: pointer; color: #005ea2; padding: .15rem .35rem; min-height: 1.5rem; } .wands-rowdetail > summary:hover { text-decoration: underline; } .wands-rowdetail__body { padding: .5rem .35rem .25rem; border-left: 3px solid var(--wands-line); margin-top: .25rem; } .wands-rowdetail dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .15rem .5rem; } .wands-rowdetail dt { font-weight: 600; color: var(--wands-ink-soft); } .wands-rowdetail dd { margin: 0; } /* --------------------------------------------------------------------------- 9. STACKED VIEW ON A NARROW SCREEN. Asked for: "make it responsive page compatible to tablet". Every data cell carries data-label in the markup, so the column name is reprinted beside its value once the header row is taken out of the flow. The header is moved off screen rather than display:none — display:none removes it from the accessibility tree as well, and a screen reader still needs it. --------------------------------------------------------------------------- */ @media (max-width: 40rem) { #applicationsTable thead { position: absolute; left: -9999px; } #applicationsTable tbody tr { display: block; border-bottom: 2px solid var(--wands-line); padding: .35rem 0; } #applicationsTable tbody th, #applicationsTable tbody td { display: block; border: 0; padding: .2rem .5rem; } #applicationsTable tbody td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--wands-ink-soft); } /* Nothing to reprint for the details cell — its own summary says what it is. */ #applicationsTable tbody td.wands-nolabel::before { content: none; } } /* --------------------------------------------------------------------------- 9b. THE SAME STACKED VIEW, FOR EVERY OTHER TABLE — .wands-stacked. THIS SECTION EXISTS FOR EXACTLY THE REASON SECTION 10 EXISTS, and the two should be read together. Section 9 was written for the dashboard and keyed on `#applicationsTable`, so its rules are unreachable from any other table. The second table in the project — the Local Approving Authority directory — carried data-label on every cell as the contract requires and the attributes did nothing at all, because no selector was looking for them. A markup rule that the stylesheet does not implement is worse than an absent rule: it is followed, reviewed, and has no effect. So the behaviour is generalised to a class and section 9 is LEFT EXACTLY AS IT WAS. Rewriting the dashboard's selectors to use this class would be a change to the one grid in the project that has been reported misaligned five times, made for tidiness, at a moment when nobody is testing the dashboard. The duplication is deliberate and cheap; regressing that grid is neither. Add `wands-stacked` beside `usa-table` on any table whose cells carry data-label. Below 40rem the header row moves OFF SCREEN rather than display:none — display:none takes it out of the accessibility tree as well, and a screen reader still needs the column names. --------------------------------------------------------------------------- */ @media (max-width: 40rem) { .wands-stacked thead { position: absolute; left: -9999px; } .wands-stacked tbody tr { display: block; border-bottom: 2px solid var(--wands-line); padding: .35rem 0; } .wands-stacked tbody th, .wands-stacked tbody td { display: block; border: 0; padding: .2rem .5rem; } .wands-stacked tbody td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--wands-ink-soft); } /* Same escape hatch as the grid's: a cell whose own content names it. */ .wands-stacked tbody td.wands-nolabel::before { content: none; } } /* --------------------------------------------------------------------------- 10. THE SECONDARY LINE — .wands-sub, EVERYWHERE AND NOT ONLY IN THE GRID. Section 8 styles `#applicationsTable .wands-sub`. That selector was written first and it is the reason this section is needed: the same class is used in the KPI tiles, in the table caption, under a read-only value and in the record banner — all OUTSIDE the grid — where it inherited nothing. So the secondary line rendered inline, at full body size, in full-strength ink, which made it read as a second sentence of equal weight rather than as a qualifier. That mattered most on the tiles. "Awaiting your action / from your role, not ownership" became one run of text, and the qualifier is the entire reason the tile is not ambiguous between a driller and a clerk. The base rule is the floor size, not micro. Micro (12px) is for chips and badges only — a qualifier somebody has to ACT on is not a badge. The grid keeps its own override at micro because a five-column row with two lines per cell is a genuinely different density problem. --------------------------------------------------------------------------- */ .wands-sub { display: block; font-size: var(--wands-fs-floor); line-height: 1.35; color: var(--wands-ink-soft); font-weight: 400; } /* --------------------------------------------------------------------------- 11. KPI TILES. Seven of them, and the number is the thing being read — so the number is the only element allowed to leave the type scale. It is a display figure, not running text, and 1.75rem is a deliberate exception with a comment on it rather than a drift. The tile is a COUNT, not a link dressed as a card: nothing here is clickable in the design, because a tile that navigates somewhere the filter cannot reproduce leaves a clerk on a list they cannot get back to. --------------------------------------------------------------------------- */ .wands-kpis { margin: .5rem 0 1rem; } /* USWDS gives .usa-card a 2rem bottom margin, which stacks seven tiles into a column of gaps taller than the tiles. Brought down to match the grid gap. */ .wands-kpi { margin-bottom: .75rem; } .wands-kpi .usa-card__container { margin: 0; border: 1px solid var(--wands-line); border-radius: 2px; height: 100%; /* equal heights across a row whatever the label wraps to */ } .wands-kpi .usa-card__body { padding: .5rem .75rem; } .wands-kpi__n { margin: 0; /* 1.75rem = 28px, the one deliberate exception to the scale: a KPI figure must read as a NUMBER, so it sits clearly above the 22px h1. Realigned 31 Aug 2026 when the scale came back down. */ font-size: 1.75rem; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--wands-ink); } .wands-kpi__label { margin: .1rem 0 0; font-size: var(--wands-fs-body); font-weight: 600; line-height: var(--wands-lh-tight); } /* --------------------------------------------------------------------------- 12. READ-ONLY RENDERS AS TEXT. This is the rule the design pages state and it needs a style, or "text" means "an unstyled paragraph that looks like a caption". A read-only value is still a VALUE: it keeps the weight of an editable field's content and gains a left rule to say it sits in the form but is not of it. Deliberately NOT a disabled input. A disabled field looks like something you could edit if you tried harder, several screen readers skip it entirely, and its greyed text usually fails contrast — three separate failures to avoid one line of CSS. --------------------------------------------------------------------------- */ .wands-readonly { margin: .25rem 0 1rem; padding: .25rem 0 .25rem .5rem; border-left: 3px solid var(--wands-line); font-size: var(--wands-fs-body); font-weight: 600; color: var(--wands-ink); } .wands-readonly .wands-sub { font-weight: 400; margin-top: .1rem; } /* --------------------------------------------------------------------------- 13. THE FORM ACTION ROW. Order in the MARKUP is Save, then Submit, then Back — and that is the order a keyboard and a screen reader get. Submit is visually first on a wide screen because it is the primary action, but it is not first in the DOM, because tab order following the eye is worth less than tab order following the sentence "save what I have, or go on, or go back". Back is a LINK, not a button. It navigates and discards nothing; a button beside two other buttons invites the reader to weigh three equal choices. --------------------------------------------------------------------------- */ .wands-formactions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1.5rem 0 .5rem; padding-top: 1rem; border-top: 1px solid var(--wands-line); } .wands-formactions .usa-button { margin: 0; } /* The primary sits leftmost on a wide screen without moving in the DOM. */ .wands-formactions .usa-button[type="submit"] { order: -1; } .wands-formactions__back { margin-left: auto; font-size: var(--wands-fs-floor); } @media (max-width: 30rem) { /* Stacked, and full width, because a 44px-tall button 90px wide is a target you can miss with a thumb. Back stops being pushed to the far edge — there is no far edge in a column. */ .wands-formactions { flex-direction: column; align-items: stretch; } .wands-formactions .usa-button { width: 100%; } .wands-formactions__back { margin-left: 0; text-align: center; } } /* --------------------------------------------------------------------------- 14. THE STEP RAIL, BROUGHT ONTO THE SCALE. Measured in the vendored mdwds.min.css, not taken from the upstream docs: .usa-step-indicator__segment-label is 1.06rem (17px) and .usa-step-indicator__heading is 1.13rem, rising to 1.46rem (23px) at the wider breakpoint. The h1 above it is 1.375rem (22px) — so on a desktop the RAIL WAS LARGER THAN THE PAGE TITLE and read as the heading. The counter heading is an h2 in the partial's markup and now looks like one. The labels stay VISIBLE at every width. USWDS ships `usa-step-indicator--no-labels` and hiding the labels on a narrow screen is the obvious saving, but then the rail says "3 of 5" and not what 3 is, which is the one fact the rail exists to carry. --------------------------------------------------------------------------- */ .wands-steprail { margin: 1rem 0 1.5rem; } .wands-steprail .usa-step-indicator__segment-label { font-size: var(--wands-fs-floor); } .wands-steprail .usa-step-indicator__heading { font-size: var(--wands-fs-h2); margin: 0; } .wands-steprail .usa-step-indicator__heading-counter { font-weight: 400; color: var(--wands-ink-soft); } /* --------------------------------------------------------------------------- 15. THE RECORD BANNER AND THE FACT LIST. The banner answers "which application am I looking at" without a scroll. The application number is the identifier staff read aloud on the telephone, so it is the largest thing in the block and it is selectable text, not a heading with a link wrapped round it. .wands-facts is a two-column dl. The label column is `auto`, so it takes the width of the longest label and the values line up on one edge — with a percentage the column is either padded out or wrapping "Application status" onto two lines depending on the page. Below 30rem it stacks, because two columns in 320px gives a value column about eleven characters wide. --------------------------------------------------------------------------- */ .wands-banner { margin: 0 0 1rem; padding: .75rem 1rem; border: 1px solid var(--wands-line); border-left: 4px solid #005ea2; background: #f7f9fa; } .wands-banner__id { margin: 0; font-size: var(--wands-fs-h2); font-weight: 700; font-variant-numeric: tabular-nums; } .wands-facts { margin: .5rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; font-size: var(--wands-fs-body); } .wands-facts dt { font-weight: 600; color: var(--wands-ink-soft); } .wands-facts dd { margin: 0; } @media (max-width: 30rem) { .wands-facts { grid-template-columns: 1fr; gap: 0; } .wands-facts dt { margin-top: .4rem; } } /* --------------------------------------------------------------------------- 16. THE NEXT-ACTION CARD. One card, at most one on a page, saying whose move it is and what the move is. It is bordered in the warm accent rather than filled with it: a filled panel at 4.59:1 against white text is legal and still tiring to read a paragraph in, and this card holds a paragraph. The heading says WHOSE action before it says what — "Your move" or "With the county" — because a reader who is not the actor should be able to stop after three words. --------------------------------------------------------------------------- */ .wands-next { margin: 1rem 0; padding: .75rem 1rem; border: 1px solid #936f38; border-left: 4px solid #936f38; background: #fef8ee; } .wands-next h2, .wands-next h3 { margin: 0 0 .25rem; font-size: var(--wands-fs-h3); } .wands-next p { margin: 0 0 .5rem; } .wands-next > :last-child { margin-bottom: 0; } /* --------------------------------------------------------------------------- 17. THE COMPONENT KIT PAGE. Each specimen sits above the rule that governs it. The rule is the deliverable — a specimen with no rule beside it is a screenshot, and a developer will reasonably copy it into a place it does not belong. --------------------------------------------------------------------------- */ .wands-kit { margin: 0 0 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--wands-line); } .wands-kit > h2 { margin: 0 0 .5rem; } .wands-kit__demo { padding: .75rem; border: 1px dashed var(--wands-line); background: #fff; } .wands-kit__rule { margin: .75rem 0 0; padding-left: .75rem; border-left: 3px solid var(--wands-line); font-size: var(--wands-fs-floor); color: var(--wands-ink-soft); } .wands-kit__rule strong { color: var(--wands-ink); } /* --------------------------------------------------------------------------- 18. PRINT. A clerk prints the queue. Without display:table-header-group the column headers appear on page one only and pages two onward are unlabelled columns of permit numbers. --------------------------------------------------------------------------- */ @media print { .usa-table-container--scrollable { overflow: visible; max-height: none; } #applicationsTable thead { display: table-header-group; } #applicationsTable tr { page-break-inside: avoid; } #applicationsTable thead th { position: static; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .wands-tblbar, .wands-rowdetail > summary { display: none; } /* Print the detail regardless of whether it was expanded on screen — paper has no disclosure triangle. */ .wands-rowdetail__body { display: block !important; } /* The banner, the next-action card and the KPI tiles keep their LEFT RULE and lose their fill. A tinted panel prints as a grey wash that costs toner and drops the text contrast; the rule survives a mono printer and still says "this block is set apart". Colour is never the only carrier, and on paper it is often not a carrier at all. */ .wands-banner, .wands-next { background: none; } .wands-kpi .usa-card__container, .wands-kit__demo { border: 1px solid #757575; } /* Don't break a record's banner or its next action across two sheets — the heading on one page and the instruction on the next is how an action gets missed. */ .wands-banner, .wands-next, .wands-kit { page-break-inside: avoid; } /* The form actions are on-screen controls. On paper they are three words nobody can press, and "Save draft" printed under a form invites a reader to believe the paper copy is the one that was saved. */ .wands-formactions { display: none; } /* Every design page ends with a link back to the catalogue. It is navigation, not content. */ .wands-designfoot { display: none; } }