@layer reset, tokens, base, layout, components, utilities; @layer reset { /* * Modern minimal reset. * * Scope: only the browser defaults that get in the way of every project * (box-sizing, margins, media sizing, form control inheritance). It does * NOT set colours, fonts or spacing scale values — those are tokens * (layers/tokens.css) and element defaults (layers/base.css). Keeping the * reset free of tokens means it never has to change when the design * changes, and it can be read/audited on its own. * * Loaded first (`@layer reset`), so anything here is the lowest-priority * layer: base, layout, components and utilities all win over it. */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { min-height: 100svh; line-height: 1.5; -webkit-font-smoothing: antialiased; } img, picture, svg, video, canvas { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: none; cursor: pointer; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } a { color: inherit; text-decoration: inherit; } fieldset { border: none; } /* Respect the OS-level reduced-motion preference at the reset level too, so that any animation added later (including by project CSS outside this package) is off by default unless the browser says motion is fine. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } } @layer tokens { /* * Design tokens — @layer tokens. * * Consolidates the design system that mietwerk (canonical class/token * names), zeitwerk and gastwerk each forked and restyled with their own * accent colour (see docs/css-architecture.md for the full inventory of * what came from where and every rename). Same leitmotif in all three: a * calm, flat look — hairlines instead of heavy borders, restrained * shadows, ONE accent colour for everything interactive, a neutral grey * scale, a spacing scale, a system font stack (no webfonts), WCAG AA * contrast. * * THEME MODEL — replaces the "write the dark block twice" pattern every * fork used (once under `@media (prefers-color-scheme: dark) { :root:not( * [data-theme="light"]) {...} }` for "no explicit choice saved", once under * `:root[data-theme="dark"] {...}` for an explicit override — each fork's * base.css header explains this was intentional, since plain CSS cannot * reuse a custom-property block across an `@media` boundary). `light-dark()` * removes the duplication: every colour token is written ONCE as * `light-dark(, )`, and only `color-scheme` still * needs the three-way split below. The three-state UX (system/light/dark — * kept from zeitwerk, see its base.css/docs/ui.md, not just a light/dark * toggle) stays a JS-layer concern: "system" is the absence of a * `data-theme` attribute on ``, "light"/"dark" set it explicitly. * `light-dark()` only needs the *resolved* scheme, which `color-scheme` * communicates. * * MULTI-LAYER VALUES (box-shadow) — light-dark()'s two arguments split on * every top-level comma, so a value that is itself a comma-separated list * (a two-layer box-shadow) can't be inlined directly — it would parse as * extra light-dark() arguments. Fix: give each theme's shadow list its own * custom property first (the comma is now safely inside that property's * own value, not inside light-dark()'s argument list), then reference both * with `light-dark(var(--x-light), var(--x-dark))` — a single var() token * has no top-level comma, so this always parses as exactly two arguments. * See --shadow-sm/-md/-lg below. * * BRAND / ACCENT — `--color-primary` and friends are designed to be * overridden by a generated brand.css (later task, proposal section 4.2): * a project sets `GRUNDWERK_UI["ACCENT"] = {"light": ..., "dark": ...}` and * brand.css only has to emit `--brand-accent-light`/`--brand-accent-dark`. * Everything else — hover, tint, tint border, focus ring — is DERIVED here * from `--brand-accent` with `color-mix()`, so a project never hand-picks * a hover/tint hex itself (previously each fork's header comment had to * document its own hand-picked hover/tint value per accent colour). The * values below are the neutral fallback (mietwerk's green accent) used * when no brand.css is loaded yet. * * RENAMES vs mietwerk (the canonical fork — full table with reasons in * docs/css-architecture.md, "Tokens: renames vs mietwerk"): * * --color-primary-soft -> --color-primary-tint * --color-primary-soft-border -> --color-primary-tint-border * --transition (one flat value) -> --duration-base + --ease-standard * (--transition kept as a computed alias) * * New tokens no fork had (previously hardcoded inline, repeated per file): * --shadow-lg, --z-sticky/-drawer/-scrim/-overlay, --target-size-min, * --sidebar-width, --brand-accent(-light/-dark). * * CONTRAST — computed with a small relative-luminance script (WCAG AA, * scratchpad-only, not part of the repo — same approach each fork's header * documents) against the DEFAULT fallback accent (mietwerk's green, * #0d7047 light / #3fcf8e dark), since that is what ships without a * brand.css. A project's own brand.css must clear the same bar — that is * what the proposal's brand-contrast system check (section 4.2) is for. * * Light: text #15181d/bg #f7f8f9 = 16.73:1; muted #616a76/bg = 5.15:1; * primary(link) #0d7047/bg = 5.77:1, /surface #ffffff = 6.13:1; * primary-contrast #ffffff/primary (button text) = 6.13:1; hover * ~#0b5f3c (color-mix 85% primary + black)/bg = 7.27:1; primary text on * 14%-tint surface = 4.99:1; danger #b3261e/bg = 6.15:1; danger-contrast/ * danger = 6.54:1; badge text/bg — success 6.21:1, warning 6.79:1, * danger 5.61:1, info 7.13:1, muted 5.99:1; focus ring (primary) vs * surface, UI >=3:1 -> 6.13:1. * * Dark: text #e7e9ec/bg #0e1013 = 15.66:1; muted #99a1ad/bg = 7.31:1; * primary(link) #3fcf8e/bg = 9.55:1, /surface #16191e = 8.83:1; * primary-contrast #052517/primary = 8.2:1; hover ~#5cd69f (color-mix * 85% primary + white)/bg = 10.5:1; primary text on 18%-tint surface = * 6.18:1; danger #ff8a80/bg = 8.35:1; danger-contrast/danger = 7.73:1; * badge text/bg — success 8.43:1, warning 8.16:1, danger 6.2:1, info * 6.96:1, muted 7.94:1; focus ring (primary) vs surface, UI >=3:1 -> * 8.83:1. * * All pairs comfortably clear 4.5:1 (text AA) / 3:1 (UI AA). The * color-mix()-derived hover shade was approximated in sRGB for this * check (the browser mixes `in oklch`, which trends the same direction — * darker in light mode, lighter in dark mode — so this is a lower bound, * not an exact figure). * * RULE: everything outside this file uses tokens only, never a literal * hex/rgb/hsl/oklch colour — see ui/tests/test_css_token_audit.py. */ :root { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } :root { /* ------------------------------------------------------------ Brand Overridden wholesale by a generated brand.css (proposal 4.2), which only needs to set these two. Everything "accent-flavoured" below derives from --brand-accent. */ --brand-accent-light: #0d7047; --brand-accent-dark: #3fcf8e; --brand-accent: light-dark(var(--brand-accent-light), var(--brand-accent-dark)); /* -------------------------------------------------------- Neutral scale Cool grey, deliberately low-contrast against itself: hierarchy comes from spacing and typography, not border weight. */ --color-bg: light-dark(#f7f8f9, #0e1013); --color-surface: light-dark(#ffffff, #16191e); --color-surface-alt: light-dark(#f3f4f6, #1c2026); --color-surface-hover: light-dark(#eceef1, #23272e); --color-border: light-dark(#e4e6ea, #282d34); --color-border-strong: light-dark(#c4c9d0, #3c434c); /* v0.1.2: neither --color-border nor --color-border-strong clears WCAG 1.4.11 (non-text contrast, >=3:1) against --color-surface - --color-border-strong measures ~1.67:1 in light mode and ~1.76:1 in dark (both computed the same relative-luminance way as this file's own CONTRAST note below) - both were designed as *hairlines* (deliberately low-contrast, see this file's own header comment on the neutral scale), fine for a decorative divider but not for a control whose boundary is its only visible affordance (`.button-secondary` on a white card, found barely visible on staging). This token is for exactly that case: ~3.25:1 in light mode, ~3.65:1 in dark, against --color-surface. */ --color-border-control: light-dark(#8a8f99, #6b7280); --color-text: light-dark(#15181d, #e7e9ec); --color-muted: light-dark(#616a76, #99a1ad); /* Backdrop behind an overlay/mobile drawer — always dark, independent of theme (a scrim over content reads dark in both themes; zeitwerk tokenized this, mietwerk/gastwerk hardcoded it inline each time). */ --color-scrim: rgba(15, 17, 21, 0.45); /* Solid, theme-invariant count pill (badge.css's `.badge-count`, v0.1.1 — a small unread-notification-style counter, not a status badge). Independent of `--color-danger`/`-contrast` on purpose, even though it starts from the same pair: a project may re-brand its danger colour without wanting its notification counter to move with it, and a solid pill's contrast never depends on the *page* background the way every other token above does (same reasoning as `--color-scrim`). Ported from zeitwerk's own project-local `--zw-badge-count-bg/-fg` (docs/css-architecture.md's inventory flagged this as a "candidate add-on, needs its own token pair" - this is that pair). */ --color-count-bg: #b3261e; --color-count-fg: #ffffff; /* ---------------------------------------------------------------- Accent The one accent colour. Everything interactive (links, primary buttons, active nav, focus ring) uses it — nothing else does. */ --color-primary: var(--brand-accent); --color-primary-hover: color-mix(in oklch, var(--brand-accent) 85%, light-dark(black, white)); --color-primary-contrast: light-dark(#ffffff, #052517); --color-primary-tint: color-mix(in oklch, var(--brand-accent) 14%, transparent); --color-primary-tint-border: color-mix(in oklch, var(--brand-accent) 28%, transparent); /* --------------------------------------------------------------- Danger */ --color-danger: light-dark(#b3261e, #ff8a80); --color-danger-hover: light-dark(#8f1e18, #ffa9a1); --color-danger-contrast: light-dark(#ffffff, #370605); --color-success: light-dark(#14663a, #6fe0a0); /* --------------------------------------------- Status triples (badges, messages, notices): bg (tint) / text / border per status. */ --color-success-bg: light-dark(#e8f4ec, rgba(63, 207, 142, 0.13)); --color-success-border: light-dark(#bcdfc9, rgba(63, 207, 142, 0.30)); --color-warning-text: light-dark(#7a4a06, #f2c46b); --color-warning-bg: light-dark(#fdf3e0, rgba(242, 196, 107, 0.13)); --color-warning-border: light-dark(#f0d9ab, rgba(242, 196, 107, 0.30)); --color-danger-bg: light-dark(#fbeae8, rgba(255, 138, 128, 0.13)); --color-danger-border: light-dark(#f3c6c1, rgba(255, 138, 128, 0.30)); --color-info-text: light-dark(#1d4f8f, #8fbcf5); --color-info-bg: light-dark(#e9f0fa, rgba(143, 188, 245, 0.13)); --color-info-border: light-dark(#c3d6ee, rgba(143, 188, 245, 0.30)); --color-muted-bg: light-dark(#f0f1f3, rgba(255, 255, 255, 0.05)); --color-muted-text: light-dark(#545c67, #b3bac4); --color-muted-border: light-dark(#dcdfe4, rgba(255, 255, 255, 0.12)); /* ---------------------------------------------------------------- Focus A thin SOLID ring (box-shadow). The forks used the accent at 30% opacity, which only reaches ~1.7:1 against the light surface and fails WCAG 1.4.11 (non-text contrast >= 3:1) for every accent. A solid 2px ring in the accent colour inherits the accent's contrast (checked by grundwerk_ui.E102). */ --focus-ring-color: var(--brand-accent); --focus-ring: 0 0 0 2px var(--focus-ring-color); --focus-ring-danger-color: var(--color-danger); --focus-ring-danger: 0 0 0 2px var(--focus-ring-danger-color); /* ---------------------------------------------------------------- Space */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space: 1rem; /* --------------------------------------------------------------- Radius */ --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* --------------------------------------------------------------- Shadow Deliberately flat: depth comes from the hairline border, shadow only for things that genuinely float above the page (dropdown, dialog, lightbox). See the file header for why each is split into a light/dark custom property before being passed to light-dark(). */ --shadow-sm-light: 0 1px 2px rgba(16, 20, 26, 0.05); --shadow-sm-dark: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-sm: light-dark(var(--shadow-sm-light), var(--shadow-sm-dark)); --shadow-md-light: 0 8px 24px -6px rgba(16, 20, 26, 0.16), 0 2px 6px rgba(16, 20, 26, 0.06); --shadow-md-dark: 0 10px 28px -8px rgba(0, 0, 0, 0.65), 0 2px 6px rgba(0, 0, 0, 0.4); --shadow-md: light-dark(var(--shadow-md-light), var(--shadow-md-dark)); --shadow-lg-light: 0 22px 44px -16px rgba(16, 20, 26, 0.22); --shadow-lg-dark: 0 24px 48px -16px rgba(0, 0, 0, 0.55); --shadow-lg: light-dark(var(--shadow-lg-light), var(--shadow-lg-dark)); /* ---------------------------------------------------------- Typography System font stack only — no webfont download (CSP, privacy, no flash of invisible text). */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.85rem; --font-size-base: 0.95rem; --font-size-lg: 1.1rem; --font-size-xl: 1.5rem; --font-size-2xl: 2rem; /* ---------------------------------------------------------------- Motion Split into duration + easing (each fork only had one flat `--transition: 130ms ease`) — `--transition` stays as a computed alias so existing component patterns (`transition: background-color var(--transition)`) keep working unchanged. */ --duration-fast: 100ms; --duration-base: 130ms; --duration-slow: 220ms; --ease-standard: ease; --transition: var(--duration-base) var(--ease-standard); /* --------------------------------------------------------------- Z-index Previously hardcoded per fork (30 for sticky headers, 40 for the drawer scrim, 50 for the drawer itself, 100 for the lightbox) — named here so a new overlay component picks the right layer instead of guessing a number. */ --z-sticky: 30; --z-scrim: 40; --z-drawer: 50; --z-overlay: 100; /* --------------------------------------------------------- Target size WCAG 2.5.8 (AA) — every interactive control's hit area (button, icon button, checkbox/radio, link acting as a control) should be at least this in both dimensions. */ --target-size-min: 24px; /* --------------------------------------------------------------- Layout */ --content-width: 78rem; --sidebar-width: 15.5rem; } } @layer base { /* * Element defaults — @layer base (see ../grundwerk.css for the layer * order; this file is imported into that layer, it does not wrap its * own rules in `@layer base { ... }`). * * Scope: bare-element styling only (body, headings, links, lists, * tables, form controls) so that a page with no component classes at * all still looks like grundwerk-ui, not like the browser default. * Every colour is a token from layers/tokens.css (see that file's * header and docs/css-architecture.md, "components use tokens only" — * the rule applies here too, and tests/test_css_token_audit.py checks * it for this file exactly like every other). * * Ported from mietwerk's base.css (canonical) with two additions no * fork had: `accent-color` on native checkboxes/radios/range, and a * `prefers-reduced-motion` guard around `@view-transition` (proposal * 4.3: "Page transitions come from `@view-transition { navigation: * auto; }` in base.css, wrapped in prefers-reduced-motion: * no-preference. Browsers without support (Firefox) switch pages * without animation."). */ body { font-family: var(--font-sans); font-size: var(--font-size-base); color: var(--color-text); background: var(--color-bg); line-height: 1.55; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -0.011em; font-weight: 600; } h1 { font-size: var(--font-size-2xl); } h2 { font-size: var(--font-size-xl); } h3 { font-size: var(--font-size-lg); } h4 { font-size: var(--font-size-base); } small { font-size: var(--font-size-sm); } code, kbd, pre, samp { font-family: var(--font-mono); font-size: var(--font-size-sm); } a { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-primary-hover); text-decoration: underline; } /* WCAG 1.4.1 (use of colour) / axe's "link-in-text-block": a link sitting inside a paragraph of running text must be distinguishable from its surrounding text by more than colour alone (found by axe on the allauth login page's "please sign up first" sentence). Scoped to `:where(p, li, dd, td)` - prose/table-cell contexts only - and `:not([class])` so a *styled* link (`.button`/`.badge`/`.tab`/a ``, all of which carry a class and are never inside running text anyway) is never accidentally underlined. `:where()` keeps this at zero specificity, same as `a`/`a:hover` above, so a more specific component rule still wins without needing `!important`. */ :where(p, li, dd, td) a:not([class]) { text-decoration: underline; text-underline-offset: 2px; } hr { border: none; border-top: 1px solid var(--color-border); } /* ---------------------------------------------------------------- Tables A bare already looks right: bordered/rounded container, muted uppercase head, hairline rows, subtle zebra + hover. No wrapper class needed (mietwerk convention, kept). Sortable headers, empty-state styling and responsive stacking are component-layer concerns (table component, later task) - this is only the element-level default. */ table { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } th, td { padding: var(--space-sm) var(--space-md); text-align: left; border-bottom: 1px solid var(--color-border); } thead th { background: var(--color-surface-alt); color: var(--color-muted); font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } tbody tr:nth-child(even) { background: var(--color-surface-alt); } tbody tr:hover { background: var(--color-surface-hover); } tbody tr:last-child td { border-bottom: none; } /* --------------------------------------------------------------- Forms Text-like inputs share one rule via an attribute-selector list, so any matching input type is styled without a class (mietwerk convention). */ label { display: inline-block; font-weight: 600; font-size: var(--font-size-sm); } input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="file"], select, textarea { width: 100%; max-width: 32rem; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); } textarea { min-height: 6rem; } input::placeholder, textarea::placeholder { color: var(--color-muted); opacity: 0.8; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus-ring-color); box-shadow: var(--focus-ring); } /* `::file-selector-button` is its own UA-shadow control, not styled by any of the rules above - left at the browser default (a plain grey OS-native button, clashing hard with every other control on the page) until now. Same look as `.button-secondary` (layers/components/ button.css) - literal declarations, not a class, since a pseudo- element can't be given one. */ input[type="file"]::file-selector-button { margin-inline-end: var(--space-sm); padding: 0.45rem 0.85rem; border: 1px solid var(--color-border-control); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; font-weight: 600; cursor: pointer; transition: background-color var(--transition), border-color var(--transition), color var(--transition); } input[type="file"]::file-selector-button:hover { background: var(--color-surface-alt); border-color: var(--color-border-control); } /* Native checkbox/radio/range use accent-color instead of custom-built replacements - no fork had this; it is the platform-native way to theme these controls and keeps them fully accessible for free. */ input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--color-primary); } fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-md); } legend { padding: 0 var(--space-xs); font-weight: 600; } /* -------------------------------------------------------- Focus-visible One universal rule instead of the enumerated per-selector list every fork used (mietwerk/zeitwerk's list had to be updated by hand whenever a new interactive element was added, and mietwerk's own list still references a `.nav-link` class that no longer exists anywhere in its CSS - a dead selector from that drift). `:focus-visible` already only fires for keyboard/programmatic focus, so a blanket rule does not show the ring on a mouse click. */ :focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } ::selection { background: var(--color-primary-tint); color: var(--color-text); } /* ----------------------------------------------------------- Motion Reduced-motion is handled twice, deliberately: layers/reset.css turns off *all* animations/transitions unconditionally for that preference (a blanket safety net), and the @view-transition rule below only ever activates in the opposite media query, so a page transition can never appear for a user who asked for less motion. */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } } /* ------------------------------------------------------------------ Icons `{% icon %}` (templatetags/grundwerk_ui.py) always renders its with this class. Without an explicit size, a bare inline falls back to the UA default intrinsic size (300x150 CSS px) - invisible inside a size-only wrapper that sets no width/height of its own (.side-icon/.alert-icon/.empty-state-icon/.icon-button, all components-layer - see each file's own `> svg` rule sizing it to 100% of the wrapper instead, which wins regardless of specificity: components > base in layer order, see ../grundwerk.css), but a glaring 150px-tall icon anywhere the tag is used directly inline with text (e.g. a sidebar link's `{% icon "dashboard" %} Dashboard`, no wrapper at all) - found on staging (v0.1.2). `flex: none` keeps the icon from being compressed/stretched by a flex ancestor (`.side-link`, `.cluster`, …) the way a plain inline element would be. */ .icon { width: 1em; height: 1em; flex: none; } } @layer layout { /* * Layout — @layer layout (see ../grundwerk.css for the layer order; this * file is imported into that layer, it does not wrap its own rules in * `@layer layout { ... }`). * * Two things live here: * * 1. The app shell (`.app-shell` > `.sidebar` + `.app-main` > * `.topbar` + `
`), ported from mietwerk's base.css - the same * structure zeitwerk and gastwerk forked unchanged. Mobile collapse * does NOT use the CSS-only checkbox hack the three forks used * (`#nav-toggle` + a `
(optional backdrop) * * nav.js only ever touches attributes (`data-gw-nav-open` on the * panel, `aria-expanded` on the toggle) - this file is the only * place those attributes turn into a visual open/closed state. The * *visual* styling of the toggle button itself is a component * concern (nav component, later task) - this file only handles the * structural collapse (position, transform, z-index, scrim). * * 2. Generic layout primitives (Every Layout-style) no fork had as * reusable classes - `.stack`, `.cluster`, `.grid-auto`, `.switcher`. * Each fork rebuilt the same handful of flex/grid patterns ad hoc * per component (`.stat-row`, `.dashboard-grid`, `.nav-links`, * `.filter-bar`, ...) instead of naming the underlying primitive. * Components (later tasks) should reach for one of these before * writing a bespoke `display: flex` rule. * * Every dimension here comes from a token (--space-*, --sidebar-width, * --content-width, --z-*) - see docs/css-architecture.md, "components use * tokens only": the rule applies to every layer above tokens, not just * the components layer. */ /* ------------------------------------------------------------ App shell */ .app-shell { display: flex; min-height: 100vh; align-items: stretch; } .sidebar { position: sticky; top: 0; align-self: flex-start; height: 100vh; flex: 0 0 var(--sidebar-width); display: flex; flex-direction: column; background: var(--color-surface); border-right: 1px solid var(--color-border); } [data-gw-nav-scrim] { display: none; } .app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .app-main > main, .app-main > .site-footer { width: 100%; } .app-main > main { flex: 1 0 auto; min-width: 0; } /* ------------------------------------------------------- Page container */ .page { max-width: var(--content-width); margin-inline: auto; padding: var(--space-xl) var(--space-lg); container-type: inline-size; container-name: page; min-width: 0; } /* Vertical rhythm between stacked page-level blocks (v0.1.6 fix, gastwerk review item 3) - a lobotomized-owl flow rule ("every element that has a preceding sibling gets a top margin"), the same pattern Every Layout's `.stack` uses. Before this, `{% block page_header %}` + `{% block content %}`'s own top-level elements (two ``s in a row, a `.tabs` bar immediately followed by its content, a `.table-scroll` right under a card, `.pagination`, `.back-link`, a `.detail-grid`, `.alert`, `.toolbar`/`.filter-bar`, a bare `
` from ``, `.gallery`, `.timeline`, ...) had no margin of their own - none of them know what will or won't follow them on the page - so stacked cards touched, tab content sat flush under the tab bar, and a table butted against the card above it (confirmed on gastwerk's staging deployment). Scoped to `.page`'s own *direct* children only, so it never fights a component's *internal* spacing (a card's header/body/footer regions use their own negative-margin convention, see card.css; a ``'s fields use `.form-field`'s own margin-bottom, see form-field.css) - see docs/components.md, "Spacing / flow". `.page-header`'s own `margin-bottom` (previously in page-header.css) is removed as part of this same fix: it was always `.page`'s first child, so this rule now owns that gap too - keeping both would double it for that one case. */ .page > * + * { margin-block-start: var(--space-lg); } /* ------------------------------------------------------------- Footers `.site-footer` on every layout shell's
` needs no class. This file adds * the component-level pieces from docs/css-architecture.md's inventory * row for `table`: the horizontal-scroll wrapper, sortable-header * visuals, the two-line cell pattern, and the colspan empty-state row. * Ported from mietwerk's base.css (canonical; byte-identical in zeitwerk * and gastwerk). * * `.sort-th`/`.sort-link`/`.sort-arrow*` style a sortable column header, * but the markup that toggles sort direction and preserves the * querystring (Django's `{% querystring %}` tag) is a later templatetag * task (proposal 4.1: "sort_header" in templatetags/grundwerk_ui.py) - * `` (cotton/gw/table.html) only leaves a `head` slot for * whichever ``) - a real data row never has `colspan`, so this can style it without any extra markup or wrapper class. ``'s `empty` slot renders into exactly this shape - see the component's docstring. */ tbody tr:only-child td[colspan] { padding: var(--space-xl) var(--space-md); text-align: center; color: var(--color-muted); font-size: var(--font-size-sm); } tbody tr:only-child:has(td[colspan]):hover { background: transparent; } /* A sticky
` markup (plain or sortable) a caller puts there; these * classes are ready for that later task to use unchanged. */ .table-scroll { overflow-x: auto; } .table-scroll > table { margin-bottom: 0; } .sort-th { padding: 0; } .sort-link { display: flex; align-items: center; gap: 0.3rem; padding: var(--space-sm) var(--space-md); color: inherit; font: inherit; text-decoration: none; white-space: nowrap; } .sort-link:hover { background: var(--color-surface-hover); color: var(--color-text); text-decoration: none; } .sort-link-active { color: var(--color-primary); } .sort-arrow { font-size: 0.7em; line-height: 1; } .sort-arrow-idle { opacity: 0.35; } .sort-link:hover .sort-arrow-idle { opacity: 0.7; } /* Two-line cell: primary value + a smaller sub-label below it (e.g. a tenant's name with their unit underneath). Saves a column and keeps a scanned row unambiguous. */ .cell-primary { display: block; font-weight: 500; } .cell-sub { display: block; margin-top: 0.1rem; font-size: var(--font-size-xs); color: var(--color-muted); } /* The table's built-in empty state: the caller renders exactly one row with a single cell spanning every column (`
…
 above the scroll region (proposal 4.3 wants a focusable, captioned scroll region) - visually a small muted label, not the ugly top-aligned browser default. */ .table-scroll > table > caption { padding: var(--space-sm) var(--space-md); text-align: left; font-size: var(--font-size-sm); color: var(--color-muted); caption-side: top; } /* The scroll region itself is the focusable element (tabindex="0" in the cotton template) when the table overflows - a visible focus ring tells a keyboard user there is more to scroll. */ .table-scroll:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: -2px; } /* * Pagination — @layer components. * * Ported from gastwerk's base.css (byte-identical class family; absent * in zeitwerk's base.css per docs/css-architecture.md's inventory - no * paginated list existed there when its CSS was written). * * New: `.pagination-numbers` / `.pagination-ellipsis` for the numbered * pages `` renders (mietwerk's own `ui/includes/ * pagination.html` only ever rendered prev/next + a "Page X of Y" count, * never individual page numbers - the proposal's component table (4.3) * asks for numbered pages with an ellipsis, so this is new chrome around * the same `.pagination-link`/`.pagination-current` family). */ .pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); } .pagination-pages { display: flex; align-items: center; gap: var(--space-xs); } .pagination-link { display: inline-flex; align-items: center; justify-content: center; min-width: var(--target-size-min); min-height: var(--target-size-min); padding: 0.3rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--font-size-sm); color: var(--color-text); text-decoration: none; font-variant-numeric: tabular-nums; } .pagination-link:hover { background: var(--color-surface-alt); border-color: var(--color-border-strong); text-decoration: none; } /* Not a link, a - a dead page must not look clickable or be reachable by Tab. */ .pagination-link-disabled { color: var(--color-muted); background: var(--color-surface-alt); opacity: 0.6; } .pagination-link-disabled:hover { background: var(--color-surface-alt); border-color: var(--color-border); } .pagination-link[aria-current="page"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-contrast); font-weight: 600; } .pagination-link[aria-current="page"]:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } .pagination-ellipsis { padding: 0 0.3rem; color: var(--color-muted); } .pagination-current { padding: 0 var(--space-sm); font-size: var(--font-size-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; } .pagination-count { margin: 0; font-size: var(--font-size-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; } /* * Description list ("detail grid") — @layer components. * * Ported from mietwerk's base.css (canonical; byte-identical in * zeitwerk and gastwerk). Two-column key/value grid for detail-view * `
`s; collapses to a single column on narrow screens so a long * value never gets crushed into a 9rem key column. */ .detail-grid { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: 0.55rem var(--space-lg); font-size: var(--font-size-sm); } .detail-grid dt { color: var(--color-muted); font-weight: 500; } .detail-grid dd { margin: 0; } @media (max-width: 40rem) { .detail-grid { grid-template-columns: 1fr; gap: 0.15rem 0; } .detail-grid dd { margin-bottom: var(--space-sm); } } /* * Timeline (audit entries) — @layer components. * * New component: no fork had a chronological timeline widget. All three * render audit-log entries as a plain table (see zeitwerk's * `audit/templates/audit/includes/auditlog_table.html`; mietwerk/gastwerk * do the same for their own audit apps) - a table is still the better * fit for a *paginated* audit log with a filter bar, and stays covered * by ``. `` is for the shorter, unpaginated * "what happened to this record" feed the proposal's component table * (4.3) separately asks for (e.g. a handful of entries inside a detail * page's sidebar) - a connecting line + dot per entry reads faster than * a table there. Reuses `.audit-diff`/`.audit-diff-old` (ported * unchanged from zeitwerk/gastwerk, byte-identical in both) for the * optional old->new value list inside an entry. */ .timeline { display: flex; flex-direction: column; gap: 0; } .timeline-item { position: relative; padding: 0 0 var(--space-lg) var(--space-lg); border-left: 1px solid var(--color-border); } .timeline-item:last-child { padding-bottom: 0; border-left-color: transparent; } .timeline-item::before { content: ""; position: absolute; top: 0.3rem; left: -0.3125rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--color-primary); border: 2px solid var(--color-surface); } .timeline-time { display: block; font-size: var(--font-size-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; } .timeline-title { margin: 0.1rem 0 0; font-size: var(--font-size-sm); font-weight: 600; } .timeline-body { margin-top: 0.2rem; font-size: var(--font-size-sm); color: var(--color-muted); } .audit-diff { max-width: 28rem; } .audit-diff dl { margin: var(--space-xs) 0 0; font-size: var(--font-size-xs); } .audit-diff dt { font-weight: 600; color: var(--color-muted); } .audit-diff dd { margin: 0 0 var(--space-xs); overflow-wrap: anywhere; } .audit-diff-old { text-decoration: line-through; color: var(--color-muted); } /* Navigation */ /* * Sidebar — @layer components. * * The structural shell (`.sidebar` positioning, mobile drawer collapse, * scrim) already lives in layers/layout.css, wired to nav.js's * `data-gw-nav-*` attribute contract - see that file's header comment. * This file is the *visual* styling of what goes inside the shell: * ported from mietwerk's base.css (canonical; byte-for-byte identical in * zeitwerk and gastwerk per docs/css-architecture.md's inventory row). * * `.side-link-active` (mietwerk's class, the public API existing project * templates already use) and `.side-link[aria-current="page"]` * (``'s markup - aria-current is the * standards-based way to mark the current page, screen readers get it * for free) both select the same look, so either markup works. */ .sidebar-head { padding: var(--space-md) var(--space-md) var(--space-sm); } .sidebar-nav { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding: 0 0.6rem var(--space-md); } /* Section label - a visual grouping hint only, not an interactive element. */ .side-section { margin: var(--space-md) 0 var(--space-xs); padding: 0 0.6rem; font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); } .side-section:first-child { margin-top: 0; } .side-link { display: flex; align-items: center; gap: 0.6rem; min-height: var(--target-size-min); padding: 0.4rem 0.6rem; border-radius: var(--radius-md); color: var(--color-muted); text-decoration: none; font-size: var(--font-size-sm); font-weight: 500; transition: background-color var(--transition), color var(--transition); } /* Icons inherit the link colour (currentColor) so hover/active/dark-mode follow automatically. */ .side-icon { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; opacity: 0.75; } /* `{% icon %}`'s own `.icon` class (layers/base.css) already sizes the to 1em, but this wrapper's own explicit 1.05rem should win, not whatever font-size happens to be in effect where the icon is used - components beats base in layer order regardless of selector specificity (see base.css's own comment on this rule). */ .side-icon > svg { width: 100%; height: 100%; } .side-link-active .side-icon, .side-link[aria-current="page"] .side-icon, .side-link:hover .side-icon { opacity: 1; } .side-link:hover { background: var(--color-surface-alt); color: var(--color-text); text-decoration: none; } /* Active entry: filled area + accent colour, plus a left-edge bar so it still reads at a glance for someone who can't rely on colour alone. */ .side-link-active, .side-link[aria-current="page"] { background: var(--color-primary-tint); color: var(--color-primary); font-weight: 600; box-shadow: inset 2px 0 0 var(--color-primary); } .side-link-active:hover, .side-link[aria-current="page"]:hover { background: var(--color-primary-tint); color: var(--color-primary); } .sidebar-foot { border-top: 1px solid var(--color-border); padding: var(--space-sm) var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); } .sidebar-foot-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); } .sidebar-foot-actions > * { min-width: 0; } .side-link-sm { padding: 0.2rem 0.4rem; font-size: var(--font-size-xs); } /* * Nav: topbar, logged-out header nav, back link, skip link — @layer * components. * * `.topbar` structural collapse (sticky positioning, mobile toggle * mechanics) lives in layers/layout.css already; this file is its * visual chrome plus the logged-out `.nav`/`.nav-brand`/`.nav-user` * family, all ported from mietwerk's base.css (canonical; byte-identical * in zeitwerk/gastwerk except zeitwerk's simpler logged-out header, * noted per-selector below). * * The mobile nav toggle targets `[data-gw-nav-toggle]`, not a * `.nav-toggle-label`/checkbox pair - that markup no longer exists (see * docs/css-architecture.md, "Mobile nav toggle - not the checkbox hack", * and nav.js's own header comment). ``/`` * render the button this file styles. */ .topbar-brand { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-muted); } /* New: right-aligned action group in 's `actions` slot (theme toggle, user menu, …) — pushes itself to the end of the flex row without an inline style. */ .topbar-actions { display: flex; align-items: center; gap: var(--space-sm); margin-left: auto; } /* The nav toggle only ever needs to be visible below the drawer breakpoint - layers/layout.css already drives the drawer open/close state at that same breakpoint (48rem). */ [data-gw-nav-toggle] { display: none; } @media (max-width: 48rem) { [data-gw-nav-toggle] { display: inline-flex; } } /* Logged-out header (mietwerk/gastwerk's `.nav`; zeitwerk's equivalent is plainer - bare `.nav a`, no `.nav-brand`/`.nav-links` split - but the classes below degrade to that same look when unused, so one file covers both). */ .nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); max-width: var(--content-width); margin-inline: auto; padding: 0.6rem var(--space-lg); } .nav-brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: var(--font-size-base); letter-spacing: -0.01em; margin-right: var(--space-md); padding: 0.3rem 0; color: var(--color-text); } .nav-logo { height: 1.6rem; width: 1.6rem; border-radius: var(--radius-sm); display: block; } .nav a { color: var(--color-text); text-decoration: none; } /* State is shown through fill, not underline, inside nav chrome. */ .nav a:hover { text-decoration: none; } .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); flex: 1 1 auto; } .nav-link { display: inline-block; color: var(--color-muted); text-decoration: none; font-size: var(--font-size-sm); font-weight: 500; padding: 0.35rem 0.6rem; border-radius: var(--radius-md); transition: background-color var(--transition), color var(--transition); } .nav-link:hover { background: var(--color-surface-alt); color: var(--color-text); text-decoration: none; } .nav-link-active, .nav-link[aria-current="page"] { color: var(--color-primary); background: var(--color-primary-tint); font-weight: 600; } .nav-link-active:hover, .nav-link[aria-current="page"]:hover { background: var(--color-primary-tint); color: var(--color-primary); } .nav-user { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; padding-left: var(--space-md); color: var(--color-muted); font-size: var(--font-size-sm); white-space: nowrap; } .nav-logout-form { margin: 0; padding: 0; } .nav-logout-form button { background: none; border: none; padding: 0.25rem 0.4rem; border-radius: var(--radius-sm); font: inherit; color: var(--color-muted); cursor: pointer; text-decoration: none; } .nav-logout-form button:hover { background: var(--color-surface-alt); color: var(--color-text); text-decoration: none; } /* Back link (gastwerk-only today; promoted to shared per docs/css-architecture.md's inventory - a generic "back to the parent list" link, not CMS/booking-specific). Small and muted rather than the normal link accent, so it doesn't compete with the page title that follows it. */ .back-link { display: inline-flex; align-items: center; gap: 0.35rem; min-height: var(--target-size-min); color: var(--color-muted); font-size: var(--font-size-sm); text-decoration: none; } .back-link:hover { color: var(--color-text); text-decoration: underline; } /* Skip link (new - no fork had one). Off-screen until it receives keyboard focus, then pinned to the top-left corner above everything else - the first focusable element on every page, per the cotton component's docstring. */ .skip-link { position: absolute; top: -3rem; left: var(--space-sm); z-index: var(--z-overlay); padding: var(--space-sm) var(--space-md); background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-md); text-decoration: none; transition: top var(--transition); } .skip-link:focus { top: var(--space-sm); } @media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } } /* * Tabs — @layer components. * * Ported from mietwerk's base.css (canonical; byte-identical in * zeitwerk and gastwerk). Link-based, server-rendered page tabs (see * cotton/gw/tabs.html's docstring for why this is not the ARIA * `role="tablist"` widget) - `[aria-current="page"]` replaces the * fork's `.tab-active` class as the *state* marker (screen readers get * the state for free; the class stays only for the fork-compatible * selector below). */ .tabs { display: flex; gap: var(--space-xs); border-bottom: 1px solid var(--color-border); overflow-x: auto; } .tab { display: inline-flex; align-items: center; min-height: var(--target-size-min); padding: 0.5rem 0.75rem; border-bottom: 2px solid transparent; color: var(--color-muted); font-size: var(--font-size-sm); font-weight: 500; white-space: nowrap; text-decoration: none; } .tab:hover { color: var(--color-text); text-decoration: none; } .tab[aria-current="page"], .tab-active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; } /* * Breadcrumbs — @layer components. * * New: no admin/back-office fork had a breadcrumb trail (only gastwerk's * unrelated public-site `.breadcrumb` in blocks.css - a different design * system entirely, not ported, see docs/css-architecture.md's "gastwerk's * four public-site stylesheets" section). Named `.breadcrumbs` (plural), * deliberately distinct from that public-site `.breadcrumb` class so the * two can never collide if a project ever loads both stylesheets on one * page. */ .breadcrumbs { margin-bottom: var(--space-sm); } .breadcrumbs-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; padding: 0; list-style: none; font-size: var(--font-size-sm); color: var(--color-muted); } .breadcrumbs-list li { display: flex; align-items: center; gap: 0.35rem; } .breadcrumbs-list li:not(:last-child)::after { content: "/"; color: var(--color-border-strong); } .breadcrumbs-list a { color: var(--color-muted); text-decoration: none; } .breadcrumbs-list a:hover { color: var(--color-text); text-decoration: underline; } .breadcrumbs-list [aria-current="page"] { color: var(--color-text); font-weight: 500; } /* Layout */ /* * Page header — @layer components. * * Ported from mietwerk's base.css (canonical; byte-identical in * zeitwerk and gastwerk). Recurring list-page scaffold: title on the * left, primary action on the right, wrapping to a second line on * narrow screens rather than crushing the title. * * No `margin-bottom` here (v0.1.6 fix, gastwerk review item 3) - this * component is always `.page`'s own first child (`{% block page_header * %}` renders directly above `{% block content %}` inside `.page`, * base_app.html/base_public.html), so `layers/layout.css`'s `.page > * * + *` flow rule already owns the gap to whatever follows it; a margin * here too would double it. */ .page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; } .page-header h1 { margin: 0; } .page-header-description { margin: 0.2rem 0 0; color: var(--color-muted); font-size: var(--font-size-sm); } .page-header-actions { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; } /* * Toolbar / filter bar — @layer components. * * `.toolbar` base ported from mietwerk's base.css (canonical; identical * in zeitwerk/gastwerk). The two additions below are gastwerk-only * today; docs/css-architecture.md's inventory recommends adopting both * as shared, since neither is CMS/booking-specific: * * - `.toolbar form { display: contents }` - a single-button
* (e.g. a lone "regenerate PDF" POST) would otherwise force a line * break inside the toolbar (a
is block-level by default). * `display: contents` drops the form's own box from layout so its * child button becomes a flex item of `.toolbar` directly; the form * stays fully functional (submit/CSRF unaffected), only its box * disappears. * - `.toolbar--split` - a second action row, visually separated from * the form/content above it (e.g. "Download PDF" / "Send for * signature" below an edit form). */ .toolbar { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; } .toolbar form { display: contents; } .toolbar--split { border-top: 1px solid var(--color-border); padding-top: var(--space-md); margin-top: var(--space-md); } /* Inline form (v0.1.1) — a small
that must sit inline in a table * cell or a toolbar row instead of forcing its own line (a
is * block-level by default; unlike `.toolbar form { display: contents }` * above, this is for a form that stands alone, not nested inside * `.toolbar`). Ported unchanged from zeitwerk's base.css ("Phase B1" * addition) - docs/css-architecture.md's inventory flagged it as a * shared candidate ("generic, not time-tracking-specific"), grouped here * since it solves the exact same "a
shouldn't break the layout * around it" problem as the rule above. */ .inline-form { display: inline-flex; align-items: center; gap: var(--space-xs); } /* * Filter bar — @layer components. * * Two related v0.1.0 gaps live in this one file (docs/ui.md's "grundwerk- * ui gaps" #3/#4): * * 1. `.filter-bar` — a compact, bordered strip for a GET filter
* (search input, extra fields, submit, reset). Ported from * zeitwerk's own workaround, which matched every GET form on the * page via the attribute selector `main form[method="get"]` - * promoted here to an explicit class per that gap report's own * suggested fix, so a project opts a
into this styling * instead of every GET form automatically getting it (an unrelated * GET-method search form outside a list page would otherwise be * styled as a filter bar too). `` (cotton/gw/ * filter-bar.html) renders it. * * mietwerk's own `.filter-bar` was a different, unbordered thing — * a plain flex row for the *active-filter chips* below, not a form * wrapper. Both are folded into one bordered container class here: * "the strip of controls above a filtered list" is one visual idea * whether its content is form fields, chips, or both together (a * compact form with the currently-applied filters shown as chips * alongside it is a common combination) — a project that wants the * older, plainer chip-row-only look can still override `.filter-bar` * locally (docs/css-architecture.md, "a project's own CSS ... beats * all six [layers]"). * 2. `.filter-chip`/`-value`/`-remove` — the active-filters-as- * removable-pills pattern (byte-identical in mietwerk/zeitwerk). * The remove affordance is a real link (``, an href dropping just that one query * parameter), not a button/JS — works with JS disabled, no * client-side state to keep in sync with the server-rendered list. * * `.search-input` (width only — border/radius/focus already come from * layers/base.css's generic `input[type="search"]`) is also promoted from * gap to shared file here: css-architecture.md's inventory suggested * "search.css (or folded into toolbar.css)"; folded into filter.css * instead, since every project that used it did so inside a filter bar. */ .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); padding: var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .filter-bar label { margin: 0; font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-muted); } /* Groups one label+control pair as a single flex item (v0.1.6 fix, gastwerk review item 21) - without this, an un-wrapped
` - the same shape `.checkbox-grid` (form-field.css) already styles, but without that class (Django never adds it). Applied to the control div identified above, narrowed with `:has()` so it only ever matches an actual radio/checkbox option group, never an unrelated wrapper div (e.g. a project's own custom widget). */ :where(form) :where(p, div, fieldset):not( .form-field, .filter-bar, .inline-form, .toolbar, :is(.filter-bar, .inline-form, .toolbar, .form-field) * ):has(> label, > legend):not(:has(> .form-field, > input[type="checkbox"])) > div:not(.helptext):not(.errorlist):has(input[type="radio"], input[type="checkbox"]) { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--space-xs) var(--space-md); } :where(form) :where(p, div, fieldset):not( .form-field, .filter-bar, .inline-form, .toolbar, :is(.filter-bar, .inline-form, .toolbar, .form-field) * ):has(> label, > legend):not(:has(> .form-field, > input[type="checkbox"])) > div:not(.helptext):not(.errorlist):has(input[type="radio"], input[type="checkbox"]) label { display: flex; align-items: center; gap: var(--space-xs); min-height: var(--target-size-min); font-weight: 400; margin-bottom: 0; } /* ------------------------------------------------------------ Lone checkbox A BooleanField's `CheckboxInput` row (never `use_fieldset` - see `grundwerk_ui.templatetags.gw_forms.gw_is_checkbox`, the same test `` uses to pick its own lone-checkbox layout) - box and label side by side instead of stacked, matching `.form-field [data-gw-field-checkbox]` (form-field.css) exactly: checkbox first, label after, help text/errors wrap onto their own full-width line. */ :where(form) :where(p, div):not( .form-field, .filter-bar, .inline-form, .toolbar, :is(.filter-bar, .inline-form, .toolbar, .form-field) * ):has(> input[type="checkbox"]) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); margin: 0 0 var(--space-md); } :where(form) :where(p, div):not( .form-field, .filter-bar, .inline-form, .toolbar, :is(.filter-bar, .inline-form, .toolbar, .form-field) * ):has(> input[type="checkbox"]) > input[type="checkbox"] { order: 1; } :where(form) :where(p, div):not( .form-field, .filter-bar, .inline-form, .toolbar, :is(.filter-bar, .inline-form, .toolbar, .form-field) * ):has(> input[type="checkbox"]) > label { order: 2; margin: 0; font-weight: 400; } :where(form) :where(p, div):not( .form-field, .filter-bar, .inline-form, .toolbar, :is(.filter-bar, .inline-form, .toolbar, .form-field) * ):has(> input[type="checkbox"]) > .helptext, :where(form) :where(p, div):not( .form-field, .filter-bar, .inline-form, .toolbar, :is(.filter-bar, .inline-form, .toolbar, .form-field) * ):has(> input[type="checkbox"]) > .help-text, :where(form) :where(p, div):not( .form-field, .filter-bar, .inline-form, .toolbar, :is(.filter-bar, .inline-form, .toolbar, .form-field) * ):has(> input[type="checkbox"]) > .errorlist { flex-basis: 100%; order: 3; margin-top: 0; } /* * Error summary — @layer components (error-summary.css). Styles * cotton/gw/error_summary.html (WCAG 3.3.1 error summary, new in * grundwerk-ui - no fork had this pattern, see docs/css-architecture.md's * inventory notes on ). Visually close to `.errornote` * (form-field.css) - same danger palette - but a block with its own * heading and a list of links, not a single line of text. */ .error-summary { margin: 0 0 var(--space-lg); padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-danger-border); border-radius: var(--radius-md); background: var(--color-danger-bg); } .error-summary-heading { margin: 0 0 var(--space-sm); color: var(--color-danger); font-size: var(--font-size-base); } .error-summary-heading:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } .error-summary ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-xs); } .error-summary li { font-size: var(--font-size-sm); color: var(--color-text); } .error-summary a { color: var(--color-danger); font-weight: 600; text-decoration: underline; } .error-summary a:hover { color: var(--color-danger-hover); } /* * Fieldset — @layer components (fieldset.css). Refines the bare *
/ defaults already in layers/base.css for * cotton/gw/fieldset.html, once fieldsets are actually stacked/nested in * a real form (ported from gastwerk's base.css, the fork with the most * fieldset use - e.g. cms/admin/block_form.html, one
per * block/traveller). */ fieldset { margin: 0 0 var(--space-lg); /* Firefox's UA default gives
a `min-width: min-content` floor, which can force it wider than a narrower container (e.g. a .card) allows and break that container's own layout - removed the same way gastwerk's base.css does. */ min-width: 0; } fieldset > *:last-child { margin-bottom: 0; } /* A
nested inside another one keeps its own border but takes a smaller outer margin than a top-level fieldset. */ fieldset fieldset { margin-bottom: var(--space-md); } legend { color: var(--color-muted); } /* * Form actions — @layer components (form-actions.css). Styles * cotton/gw/form_actions.html - new in grundwerk-ui (the forks reused * their generic `.page-header-actions` bar inside a form instead of * having a dedicated form-actions component; proposal 4.3 lists "form * actions bar" as its own v1 component). */ .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-lg); } /* Opt-in (`sticky` attribute on ): on a narrow screen the bar sticks to the bottom of the viewport instead of scrolling away at the end of a long form, so the primary action stays reachable. Same 48rem breakpoint layers/layout.css already uses for the mobile nav collapse. */ @media (max-width: 48rem) { .form-actions[data-gw-sticky] { position: sticky; bottom: 0; z-index: var(--z-sticky); margin-top: 0; margin-inline: calc(var(--space-md) * -1); padding: var(--space-md); background: var(--color-surface); border-top: 1px solid var(--color-border); } } /* * Wizard steps — @layer components (wizard.css). Styles * cotton/gw/wizard_steps.html (`.wizard-steps`/`.wizard-step-active`, * ported unchanged from mietwerk/zeitwerk - e.g. zeitwerk's * aidaimport/templates/aidaimport/import_upload.html). Purely a * horizontal progress list; see that template's own header comment for * why it is an
    here rather than mietwerk's
      . */ .wizard-steps { display: flex; flex-wrap: wrap; gap: var(--space-md); margin: 0 0 var(--space-lg); padding: 0 0 var(--space-sm); border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); color: var(--color-muted); } .wizard-step-active { color: var(--color-primary); font-weight: 600; } } @layer utilities { /* * Utilities — @layer utilities (see ../grundwerk.css for the layer * order; this file is imported into that layer, it does not wrap its * own rules in `@layer utilities { ... }`). Highest-priority layer, so * every rule here wins over base/layout/components. * * Proposal section 8.1's compromise for the "no Tailwind" decision: a * small, Tailwind-named-like set of single-purpose helper classes for * one-off layout needs a component doesn't already cover - spacing and * simple flex helpers (the building blocks an ad hoc `.stack`/`.cluster` * would otherwise need, see layers/layout.css for the dedicated * primitives), text and visibility. Kept intentionally small (~50 rules, * well under the "about a dozen ad hoc utilities" review trigger from * the proposal) - if a project keeps reaching past what is here, that is * the signal to revisit 8.1, not to grow this file unboundedly. * * Every value is a token - no literal spacing/colour number, same rule * as every other layer (docs/css-architecture.md, "components use * tokens only"). */ /* ------------------------------------------------------------- Spacing */ .mt-0 { margin-top: 0; } .mt-xs { margin-top: var(--space-xs); } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); } .mb-0 { margin-bottom: 0; } .mb-xs { margin-bottom: var(--space-xs); } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .mb-xl { margin-bottom: var(--space-xl); } .mx-auto { margin-inline: auto; } .p-0 { padding: 0; } .p-sm { padding: var(--space-sm); } .p-md { padding: var(--space-md); } .p-lg { padding: var(--space-lg); } .gap-xs { gap: var(--space-xs); } .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .gap-lg { gap: var(--space-lg); } /* ------------------------------------------------------- Flex/grid one-offs Build an ad hoc stack/cluster without reaching for the dedicated `.stack`/`.cluster` primitives in layers/layout.css. */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .grid { display: grid; } /* ------------------------------------------------------------------ Text */ .text-muted { color: var(--color-muted); } .text-xs { font-size: var(--font-size-xs); } .text-sm { font-size: var(--font-size-sm); } .text-lg { font-size: var(--font-size-lg); } .text-center { text-align: center; } .text-right { text-align: right; font-variant-numeric: tabular-nums; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ------------------------------------------------------------ Visibility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .hidden { display: none; } @media (max-width: 48rem) { .hidden-mobile { display: none; } } @media (min-width: 48.01rem) { .hidden-desktop { display: none; } } }