Document defaults

base.css declares four cascade layers, in this order: reset, base, formatted and utilities. A later layer overrides an earlier one whatever the selector specificity, so a class placed on an element inside formatted content overrides the formatted styles: .framed replaces the edge of a code block. Component and app styles are not layered: they always override the foundations without raising specificity, and own their behavior and appearance.

Each layer answers one question. A rule belongs to the first layer whose question it answers; a rule that answers none belongs to its component.

• reset: does every context reject the browser default? The reset cancels it without a design value: sizing, margins and padding, list markers, table spacing and alignment, media overflow and form typography.
• base: does the element look the same in an interface and in a text? Base gives each element its appearance wherever it is used for its meaning: typography roles and colors, literals, emphasis, links, rules, tables, captions, focus and native form controls.
• formatted: does the element receive it only inside authored text? .formatted adds the rhythm between blocks and the marks that only reading needs: list markers and indents, link underlines, quotation bars and code block surfaces.
• utilities: is it a class placed on an element? Typography roles, reading classes, stack and row, and frames apply where the markup asks for them, over document defaults and formatted content.

An element's use in interfaces decides between base and formatted. A table always holds data, so its rules, padding and header role are document defaults. Navigation, indexes and groups of links are lists without markers, so markers and indents belong to formatted content. An interface identifies a link by its position, so only formatted content underlines links. Quote presents its quotation without the formatted bar, and code shown in an interface, such as a CSS export beside its controls, needs no surface, so quotation bars and code block surfaces stay formatted too.

Spacing between elements belongs to their container: formatted content spaces its blocks, and components or stack and row space everything else. Base sets only the inner spacing of an element, such as the padding of fields and table cells, and the gap under a table caption, which belongs to its table.

Every element and pseudo-element uses border-box sizing and starts with zero margin and padding; dialogs keep their native auto margins, which center a modal in the viewport. Mobile browsers keep the authored text size in landscape orientation instead of enlarging it. The hidden attribute hides its element even when a class or component sets display, such as .stack or .row; hidden="until-found" keeps its native behavior. Lists drop their native markers, which the zero padding would push outside their box; formatted content draws its own. Tables collapse their borders, without the native spacing between cells, and cells and captions align to the start instead of centering. Images and videos keep their aspect ratio and do not exceed their container; they retain inline display unless the component changes it. Form controls inherit typography. Fieldsets drop their native frame and can shrink below their content width, so long option labels wrap.

Body text uses the sans-serif body role and --text, and turns off synthetic italics: an italic shows the slant drawn in its font, and a font without an italic face stays upright. color-scheme follows the root or data-theme scope, so native widgets such as date pickers, scrollbars and file buttons match the active theme. Headings h1–h6 use the serif role, --text-prominent and the corresponding heading-size token, with no default margins. pre, code, kbd and samp take the code role's mono family, weight and tracking, upright and in source casing. pre blocks also take its size and line height and scroll long lines inside the block; inline code, kbd and samp keep the surrounding text size with line-height: 1, and inside pre they follow the block. Links inherit the surrounding family, use prominent text without an underline, and switch to accent on hover. hr draws one --border-prominent rule instead of the native inset line. Use .formatted for authored text, and .underlined for a link that color alone would not distinguish outside it.

Tables fill their container and draw a --border rule between rows, without an outer frame. Cells are padded with --space-2 and --space-3, except on the table's outer edges, so the text of the first and last columns aligns with the surrounding text; a cell that spans rows can shift that alignment in the rows it covers. Cells align their content to the top, use tabular numbers and size columns around whole words, and literals inside them do not wrap, so a long string widens the table: wrap a wide table in a .scrollable region. The header row group, thead, takes the interface role; th and dt use prominent text at the strong weight. Table and figure captions use --text-subtle, and a table caption sits --space-2 above its table.

Native select, text inputs and textareas share a square field skin, and checkbox and radio a matching choice box, described in native forms. Labels, legends and select take the interface role there; buttons only inherit typography. Use Button or IconButton for actions.

The default :focus-visible outline uses --focus-width, --focus and --focus-offset, independently of structural borders. Owning controls may refine clearance or use an inset where edges are clipped. Text fields and select replace it with corner marks, and checkbox and radio with a thin ring, as described in native forms. Retain visible keyboard focus when overriding these defaults.

Shared classes describe layout and presentation; they do not create landmarks, parse Markdown or sanitize content. Keep semantic HTML and scope overrides to the owner. Each subject page lists its classes in a Classes table. Component classes such as Page's .page and Main's .sections are internal, even when their names appear in rendered markup.