Layout, breakpoints & layering

Breakpoints

On Material 3's window size class boundaries, because the app's own thresholds already sat there. Gutters are a constant 24px at every size.

--gd-bp-compact600pxbelow this the panel is a bottom sheet and the map is the page

--gd-bp-medium840pxthe panel docks as a rail

--gd-bp-expanded1200pxpanel plus map plus chrome, all at once

--gd-bp-large1600pxthe container stops growing; margins take the surplus

Fixed widths

--gd-size-gutter24pxthe grid gutter — constant at every breakpoint

--gd-size-margin-compact16pxpage margin below 600px

--gd-size-margin-expanded24pxpage margin at 600px and above

--gd-size-container1200pxthe document and marketing column

--gd-size-measure660pxreading text never exceeds 68 characters

--gd-size-form520pxforms are single-column at this width

--gd-size-panel400pxthe parcel panel

--gd-size-nav200pxthe docs and console side nav. The design allows 184–200; the wide end because a tree level indents 26px and the labels must survive it

--gd-size-toc170pxthe 'on this page' contents rail

--gd-size-card-min260pxa card grid drops a column rather than squeezing a card below this

--gd-size-tap44pxthe minimum touch target

Measure rules

Reading text never exceeds 68 characters — docs and articles cap the column at 660px regardless of viewport. This page is doing it.
Card grids are content-driven: cards have a 260px minimum and the grid drops a column rather than squeezing below it.
Full-bleed is for the map and the ink CTA band only. Every other section keeps its margins.
Forms are single-column at 520px max; two fields share a row only when they are one fact — a number and its unit, a month and a year.

Layering

Only one layer above popover may be open at a time: a modal closes any popover, and a toast never covers the primary action of the modal beneath it.

--gd-z-base0the page

--gd-z-map-veil9a dimming veil over the basemap — UNDER the chips it sits behind

--gd-z-map-chrome10hover chips, scale bars — things pinned over the map

--gd-z-map-pill12a floating control pill (layers, filters) — over the chrome, over a docked panel's shadow

--gd-z-map-fab14the one floating action button, above every other map control

--gd-z-panel20the parcel panel and any docked rail

--gd-z-sheet25a NON-MODAL bottom sheet (the report on a phone) — above the panel, below the scrim, because it can be read with the map still live behind it

--gd-z-sticky30a sticky header or toolbar

--gd-z-popover40dropdowns, menus, tooltips

--gd-z-scrim50the dimmer behind a modal

--gd-z-modal60dialogs and sheets

--gd-z-toast70toasts — above the modal, never over its primary action

--gd-z-skip80the skip link beats everything