/* ========================================================================== Edilis — interface skeleton (BL-12) -------------------------------------------------------------------------- Builds exclusively on the tokens from tokens.css. No colour, spacing, radius or font size is hard-coded here — the rule from docs/design-system.md §1, guarded by tests/web/test_kostra.py::test_vlastne_styly_nepisu_hodnoty_natvrdo. The few px lengths that remain are graphic dimensions the design system writes down itself (a hairline, the 8px dot, the 32px click target); the guard lists every one of them with its reason, so a new number cannot slip in unnoticed. The components and their behaviour are described in docs/design-system.md §4; the screen layouts in docs/design.md. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* `hidden` is the attribute that says "not here yet" (§4.1 — a state is an attribute, not a class), and until BL-351 nothing in this stylesheet honoured it: hiding rested on the browser's own `[hidden] { display: none }`, which any author rule setting `display` outranks regardless of specificity. That is how the thank-you of the bug widget — `
` merely un-collapsed by CSS would not — it stays closed in the accessibility tree. */ .platform-links { display: contents; } .platform-switcher { display: none; } @media (max-width: 860px) { .platform-links { display: none; } .platform-switcher { display: block; } /* The key cap says nothing on a device without that key, and it costs ~51px — a third of the width the group has at 320px (BL-723). The shortcut itself stays: `jump.js` binds it to the document, not to this element. */ .jump-opener kbd { display: none; } } /* Its own summary wears `.btn .btn--quiet`, so the row of controls reads as one row and not as a control with a stray label beside it. Where its panel hangs is stated below `.switcher > .panel`, which it has to outrank. */ .platform-switcher > summary::-webkit-details-marker { display: none; } /* The arrow is drawn by the shared rule further down (three consumers, one drawing); here it only stops claiming the rest of the row — inside a `.btn` the summary is as wide as its content, so `margin-left: auto` has nothing to push against and the `gap` of the button is the spacing the arrow needs. */ .platform-switcher > summary::after { margin-left: 0; } /* Language switcher (UC-69). The two codes sit tight together so they read as one control rather than two unrelated buttons; the active one is disabled, which is what says "this is the language you are in" without a second label. */ .language-switcher { display: flex; gap: 0; } .language-switcher .btn { padding-inline: var(--s-2); } .language-switcher .btn[aria-current="true"] { /* Not --ink-muted: this is small text, which §6 keeps off the muted token. */ color: var(--ink-soft); opacity: 1; text-decoration: underline; } /* Below the breakpoint the group of controls takes a row of its own: identity and the active organization on top, the controls beneath them — and as many rows as the controls need, since BL-691 let them wrap inside the group (see above; a clerk takes three at 320px, a platform administrator four). Nothing is hidden and nothing is re-ordered — the switcher stops forcing a wrap (`flex-basis: 0`, so it claims the leftover width instead of its full text width). Reading order and DOM order stay identical, so Tab still walks the header top to bottom (§5.1). */ @media (max-width: 860px) { .org-switcher { flex: 1 1 0; } .header-right { flex-basis: 100%; } } /* Collapsible switcher — **one component with two hosts** (design-system.md §4.3). Every mechanic lives here; `.org-switcher` in the application header switches the context of the whole application, `.calculation-switcher` in the screen header switches one record, and each host declares only what differs. Written out twice the absolute panel below would drift apart at the first touch — that is how `.breakdown` came to be `.meter` under a second name (BL-91). `min-width: 0` all the way down is what makes an ellipsis inside actually work: a flex item defaults to `min-width: auto`, which for `white-space: nowrap` text is the full string, so the name refused to shrink and pushed the header off-screen. */ .switcher { position: relative; min-width: 0; } /* The layout belongs to the , never to the
: with `display: flex` on the parent the panel becomes a flex sibling of the summary and spills sideways. */ .switcher summary { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; list-style: none; min-width: 0; } /* The switcher's panel overlays the page; it must not push it. In flow it doubled the sticky header (86 → 184px on a phone) and shoved every screen down, which also made --h-header wrong exactly while the sticky offsets were being read. The `position: relative` above was already here and unused — this is its purpose. The application header owns a stacking context (z-index 20), so z-index 1 clears the content below without competing with the dialog. The screen header owns none, and must not be given one: above the dialog the panel would outrank a confirmation. */ .switcher > .panel { position: absolute; top: calc(100% + var(--s-2)); left: 0; z-index: 1; width: max-content; max-width: min(22rem, calc(100vw - 2 * var(--s-5))); } /* Hosts whose panel hangs from the **right** edge. Two classes, like the base rule above, so they have to stand below it: written next to their hosts, higher in the file, both lost to its `left: 0` and hung from the left edge whatever their comments said (BL-720). The platform switcher sits near the right edge of a group that is itself right-aligned, so `left: 0` would push its panel past the viewport. The organization switcher does so only below 860px. Taking the leftover width there (`flex: 1 1 0`, the header's rule), it ends where the header's padding starts and its arrow sits at that edge; its left edge is wherever the wordmark ends. From the left, at 320px the host started at x = 138, the panel was 207px wide and the open panel scrolled the document sideways by 26px. From the right it hangs under the arrow, and the width cap above is the header's own padding, so it fits at any width — narrowing the panel would only have moved the edge. Above 860px the host is as wide as its name and the panel hangs from the left, under the name, as before. */ .platform-switcher > .panel { left: auto; right: 0; } @media (max-width: 860px) { .org-switcher > .panel { left: auto; right: 0; } } /* Switching is the panel's whole purpose, so its links are controls and take the target of §6 — they measured 22px. */ .switcher > .panel a { display: flex; align-items: center; min-height: var(--h-control); } /* Host: the organization switcher — the active organization must be apparent on every screen. All it adds is the width of the name (the two-row break under 860px is the header's own rule above); the mechanics are `.switcher`. */ .org-active { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 18rem; } /* Host: the switcher of saved calculations in the *screen* header (BL-127). Its rows carry a calculation's name and the year of its call, so the panel is wider than the organization's; the row itself then stacks, which is the second and last difference and is reasoned about at the rule below. Everything else is the shared base, which is the whole point of having one. It overrides by **order**, not by weight: both selectors are two classes, so this rule has to stay below `.switcher > .panel`. */ .calculation-switcher > .panel { max-width: min(26rem, calc(100vw - 2 * var(--s-5))); } /* And it looks like a control, because on this screen nothing else says it is one (#217). In the application header the same component stands alone and its weight is enough; in the screen header it stood in a row of pills, and an unframed `` between two labels reads as a third label. The frame is therefore the **host's**, not the base's: on `.switcher summary` it would follow into the application header, where the organization switcher would suddenly grow a box it never asked for — and there is no `.org-switcher` rule to take it back. `width: max-content` sits on the `
`, not on the ``: the panel is absolutely positioned at `left: 0` of the `
`, so a full-width host would anchor the panel to the whole column. `max-width: 100%` keeps a long name from pushing the header out on a phone; the base's `min-width: 0` lets it shrink. */ .calculation-switcher { width: max-content; max-width: 100%; } .calculation-switcher > summary { min-height: var(--h-control); padding: var(--s-2) var(--s-3); border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); } .calculation-switcher > summary:hover { background: var(--surface-2); } /* A row here carries three data (name, building, year of the call), so it stacks: the name on the first line, the `.hint` with the other two under it (BL-137). On one line they do not fit under 400px and what an ellipsis would eat is the **name** — the only thing telling two calculations of one building apart. `align-items` has to be restated: the base centres a one-line row on the cross axis, which in a column is the horizontal one, and every row would sit in the middle of the panel. The two permanent escapes below the list are single-line and stay where they were. */ .calculation-switcher > .panel a { flex-direction: column; align-items: flex-start; justify-content: center; } /* Same reason as .app: the content column is floored at 0 so a wide table or a long unbroken string cannot push the page past the viewport. Wide content scrolls inside its own frame (§5). One column by default, two only where the sidebar actually is. The navigation exists only inside an organization, but the two-track list used to be stated unconditionally — so on every screen outside one (sign-in, the organization picker, founding an organization, accepting an invitation) the lone .content auto-placed into the *sidebar's* track and the whole screen rendered 208px wide, with 160px left after its padding. The login card, the picker's list and the role pills broke letter by letter, on a 1440px display (BL-74). Stating the columns on the layout that has two of them keeps the fact in one place: the grid follows the DOM instead of predicting it. */ .body { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; } /* The upper bound of the content column (§5.2) sits on **this** layout and not on .content inside it; why it is not written there stands at .content below, where the question is asked. The bounded pair is **not** centered, it is anchored to the left edge, and that reverses the conclusion of the BL-81 review (BL-120). With `margin-inline: auto` the shell let go of the left edge above the bound and then travelled right with every further hundred pixels of window, while the header stayed where it was — it is full-bleed on purpose, its background and its bottom rule are the edge of the window, not of the content. The interface therefore had two vertical edges, the wordmark's and the navigation's, and the one belonging to the navigation moved: the sidebar started at 0 on a 1440px display and ~950px in on a 3440px one. Empty space on the right is quiet; navigation that stands somewhere else on every monitor is not. The bound itself stays — what BL-81 was fixing, a four-field panel read across 3000px, is the width and not the position. calc() and not a track of `minmax(0, var(--w-content))`: a track with no `fr` sizes to its content, so a sparse screen would shrink below the measure instead of holding it. Capping the container keeps `1fr` doing the work — at 1440px the container is under the cap and the column measures the same 1232px as before, above the cap the shell is 2000px wide and starts where the narrower window already had it. 2000px, because 112rem of content is what the widest table of the application needs beside its step navigation and its rail; the measurement, column by column, is in §5.2 and a guard ties it to the token (#215). */ .body:has(> .sidebar) { grid-template-columns: 208px minmax(0, 1fr); max-width: calc(208px + var(--w-content)); } @media (max-width: 860px) { .body:has(> .sidebar) { grid-template-columns: minmax(0, 1fr); } } /* The gateway — every screen reached without navigation: sign-in, sign-up, password reset, signing out, and the four screens outside an organization (picking one, founding one, accepting an invitation). Here the content is not a column beside navigation, it *is* the screen, so it takes one measure and centers. The width sits on the layout, not on a wrapper the template has to remember: the card used to be a `.gate` div inside the block, so the picker and the invitation never got it, and the flash messages — which base.html includes above the block — stayed full-width beside a centered card. Stated here, the messages, the heading and the panel share one edge. `minmax(0, …)` rather than a flat width so a phone narrower than the measure gets the viewport instead of an overflowing track. */ .body:not(:has(> .sidebar)) { grid-template-columns: minmax(0, 26rem); justify-content: center; } /* An entrance screen is short; without the extra air the card sticks to the header. */ .body:not(:has(> .sidebar)) .content { padding-block-start: var(--s-10); } /* A working screen outside an organization — the platform administrator's overview of the use cases (BL-52). Without a sidebar the layout would center it into the 26rem gateway measure above and its table would scroll inside a column narrower than its own heading. The width belongs to the layout, not to a wrapper the template has to remember; the modifier matches the specificity of the gateway rule and wins by coming after it. */ .body.body--wide { grid-template-columns: minmax(0, 1fr); justify-content: normal; } /* The same screen is also the exception to the upper bound of the content column (§5.2): the use-case overview, the form registry and the mapping diff are administrator tables that want every pixel. It is already the exception to the gateway measure above, so being the exception to --w-content too is the consistent answer — and since the bound sits on the layout with the sidebar, which this screen has none of, the exception is now the absence of a rule rather than an override. */ .body.body--wide .content { padding-block-start: var(--s-6); } /* A screen outside an organization that is **read** rather than filled in — the help centre and one article of it (BL-655). It has no sidebar either, so until now it took the gateway measure above: on a 1440px window the signpost of forty articles was a 416px ribbon 6437px tall, its lines broke at forty characters and the 65ch `.subtext` is bounded by never came into play. The gateway is the measure of a sign-in card — a form of two fields — and the privacy policy is right to wear it, because that is one screen of text behind a form; a catalogue read like a book is not. 68rem is not a third number invented here: it is the reading measure `.band-inner` already states for the entrance page (§4.3) — the measure of a page where nothing sits beside navigation, as against `--w-content`, which is the measure of the working plane. Centering is not restated because the gateway rule above already carries it and still matches; only the track changes. Same specificity as that rule and stated after it, exactly as `.body--wide` is — and it outranks the two-column shell for the same reason, so it must never meet a sidebar either (BL-121, the named list in tests/web/test_shell.py). */ .body.body--reading { grid-template-columns: minmax(0, 68rem); } /* The extra air of the gateway is for a card short enough to stick to the header. A text that scrolls for pages is not, so it takes the step the wide screens take. */ .body.body--reading .content { padding-block-start: var(--s-6); } /* The offset is the height of the sticky header — never a copied number, so both move together (design-system.md §5). It is `--h-header-real`, what the header **measures**, and the token only as the fallback: `--h-header` is a `min-height` and the header wraps as soon as it runs out of room, at no breakpoint at all. Between 861 px — where this column stops being sticky — and the width where the head still fits on one line, the token said 65 px against a header of 113 px, and the first item of the column spent those 28 px underneath it (BL-647, measured on the detail of a building at 900 px). Above that width the two are the same number and nothing moves; without the script the fallback is the token, which is where this started. */ .sidebar { position: sticky; top: var(--h-header-real, var(--h-header)); padding: var(--s-4) var(--s-3); display: flex; flex-direction: column; gap: var(--s-1); border-right: 1px solid var(--border); min-height: calc(100vh - var(--h-header-real, var(--h-header))); } @media (max-width: 860px) { .sidebar { position: static; min-height: 0; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); } /* The one place `nowrap` is right: a horizontal strip that scrolls. */ .sidebar .nav-item { white-space: nowrap; } } /* The label wraps; it is never truncated (§8 — PL and HU are longer than SK). Only the horizontal scroller below the breakpoint wants `nowrap`, and it has somewhere to scroll. Everywhere else — the vertical sidebar, the workspace tabs — a long label used to run straight off the screen. */ .nav-item { display: flex; align-items: center; gap: var(--s-2); /* The click target of §6, which the item had never been given: --t-base in a 8px/8px padding is 37,7px, so every item of every navigation in the product was 6,3px under the 44px a coarse pointer is owed — measured, not estimated (BL-580). The token and not a number, so the item grows with the pointer the way §6 asks: 40px on a mouse, 44px on a finger. It is stated on the item and not below a breakpoint because §6 says so in as many words — "rozhoduje vstup, ne šířka … `@media (pointer: coarse)`, nikdy `max-width`": a touch laptop is wide and is still driven by a thumb. */ min-height: var(--h-control); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); color: var(--ink-soft); text-decoration: none; } .nav-item:hover { background: var(--surface-2); color: var(--ink); } .nav-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; } /* A module that does not exist yet. It stays in the navigation so that the whole information architecture is visible, but it does not pretend to lead anywhere. The only remaining --ink-muted paint: --t-base text on --bg, 4.82:1 light and 5.20:1 dark, so it holds AA and keeps the item visibly quieter (BL-59). */ .nav-item[aria-disabled="true"] { color: var(--ink-muted); cursor: default; pointer-events: none; } .nav-item .coming-soon { margin-left: auto; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); /* Micro text never on --ink-muted (§6); not the accent either — a label on a disabled item must not look interactive. */ color: var(--ink-soft); } /* The width of the content column comes from the layout above (.body), never from here: the measure is a property of the shell, and .content is the same element on the gateway, in the two-column shell and on the wide workspace, each of which wants a different one. Until the review of BL-81 the upper bound of §5.2 stood here with a margin-inline: auto, and centering a column inside the track left over by the sidebar put 960px of nothing between the navigation and the content it belongs to. */ .content { padding: var(--s-6) var(--s-6) var(--s-10); display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; } /* --- Workspace ------------------------------------------------------------- The two-column layout of the building detail and of the application wizard (design-system.md §4.3): the sub-navigation of the screen on the left, its sections on the right. Both screens used to borrow .body — the application shell — and force its columns with an inline style; an inline style outranks @media, so under 860 px they stayed two-column and a phone got a 230px column next to a sliver of content (BL-56). The width lives here, in the class (§5). */ .workspace { display: grid; /* `minmax(0, 1fr)` and never a bare `1fr` (§5.1): an automatically sized track takes its minimum from its content, so one long unbreakable word pushes the whole screen into a horizontal scroll before the ellipsis is ever asked for. The floor used to be stated only on `.workspace:has(> .whats-missing)` below, which was enough while the rail was always a child of the plane; since BL-580 it leaves for the head of the screen, the `:has()` stops matching and this is the rule that is left. */ grid-template-columns: 230px minmax(0, 1fr); align-items: start; gap: var(--s-5); } /* Sticky under the application header — the offset is the token, never a copied number, so both move together (§5). `--h-sticky-top` is the bottom edge of everything already pinned under the header, and below 1180 px on the wizard that is the header plus the closed bar of `.whats-missing` (BL-580). Written by `web/js/rail.js`, because only the running page knows the height of a head that wraps. Without it the bar and the steps offset from the same line, land on top of each other and the bar paints over the steps: measured on 1100 × 900, a click on *Účely obnovy* lands on the bar's header and does not navigate. Unset — on a screen with no rail, which is every screen but the wizard's steps — the offset falls to `--h-header-real` and only then to the token, for the reason `.sidebar` states above: the token is a `min-height` and a wrapped header is taller than it says. Both columns of this grid have to lock onto the same line, so they take the same chain (BL-647). */ .workspace-nav { position: sticky; top: var(--h-sticky-top, var(--h-header-real, var(--h-header))); display: flex; flex-direction: column; gap: var(--s-1); } /* A named group of the sub-navigation — Evidencia / Agenda (design-system.md §4.3). Which section belongs where and in what order is domain data (`portfolio.rules.SECTION_GROUPS`); this class only puts the label above its items and never decides membership. */ .workspace-nav-group { display: flex; flex-direction: column; gap: var(--s-1); } /* The label lines up with the *text* of the items below it, not with their box — the inline padding is .nav-item's. Micro caps in the accent (§6: --t-micro never on --ink-muted), which also says it is not a click target. */ .workspace-nav-group > .eyebrow { padding: 0 var(--s-3); } /* Groups stand further apart than the items inside them; the spacing is the parent's gap, never a margin on a child (§5). Stated through :has() because .workspace-nav is shared with the wizard and the voting screen, which have no groups. */ .workspace-nav:has(> .workspace-nav-group) { gap: var(--s-5); } /* One section = one panel; the column only spaces the panels out and never lets a wide table stretch the grid past the screen. */ .workspace-sections { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; } @media (max-width: 860px) { .workspace { grid-template-columns: 1fr; } /* The sub-navigation becomes a wrapping row of tabs (§5.1). It must never simply disappear the way the prototype hides it — the sections of the building and the steps of the wizard would become unreachable on a phone. */ .workspace-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--s-2); padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); } /* A grouped sub-navigation keeps its groups here too: what becomes a wrapping row of tabs is the GROUP, not the whole navigation. Left as a row, "Evidencia" and "Agenda" would each collapse into a narrow strip of stacked tabs and the label would stop reading as the heading of the row under it — §5.1 lets the sub-navigation change shape, never lose a section or its grouping. */ .workspace-nav:has(> .workspace-nav-group) { flex-direction: column; gap: var(--s-4); } .workspace-nav-group { flex-direction: row; flex-wrap: wrap; align-items: center; } /* On the tab row the label is the first item of the line, so it takes the rhythm of the tabs beside it instead of the padding of a heading above them. */ .workspace-nav-group > .eyebrow { padding: 0; } /* The steps of a vote as a wrapping row of tabs (RQ-22): each tab keeps its number, name, state and second line — the row only changes shape, it drops nothing (§5.1). The foot takes a row of its own so that cancelling is never read as a ninth tab. */ .workspace-nav .nav-item--step { flex: 1 1 10rem; } .workspace-nav-foot { flex-basis: 100%; margin-top: 0; } } /* --- What is missing before submission -------------------------------------- The permanent rail of the wizard (design.md §4, rule 2): a third column beside the steps and the sections, sticky under the header. It carries the CROSS-CUT — state and a way in — never the wording of the messages: a sticky block taller than the viewport has a bottom nobody can scroll to (BL-77 hit the same trap in the calculator's summary), so the sentences stay in the step where the fault is corrected (BL-141 moved them there out of a standing .readiness checklist that repeated this very list two columns to the left, on all nine steps). Two readers of one gate, with a difference that can be said in one sentence: the rail says WHERE to go, the step WHAT exactly is wrong. The column is stated only where the panel actually is (§5): .workspace is shared with the building's workspace, which has no rail, and an unconditional third track would leave an empty column on every section of every building. `:has()` reads the DOM that decides, so the condition is not copied into the template. 20rem and not a token: it is the dimension of one component, like the 230px of the sub-navigation, and a rail of short lines grows with the text. */ .workspace:has(> .whats-missing) { grid-template-columns: 230px minmax(0, 1fr) 20rem; } /* Sticky under the application header. The two sticky columns of one grid have to lock onto the same line, which is why this is not the calc() of .calculator-summary (§5) — and the line is the one .workspace-nav takes: `--h-header-real`, what the header measures, with the token only as the fallback (BL-721). It took the bare token while the sub-navigation did, and kept it when BL-647 moved the sub-navigation to the measurement, so above 1180px, where the header can still wrap, the head of the rail hid under it: 113px of header against an offset of 65px at 1200px of window. `--h-sticky-top`, the first link of the sub-navigation's chain, is not taken: it is the header *plus this panel as a bar*, and it is unset whenever the panel is a column. It rides on .panel: the surface, border, radius and column layout are the panel's, only the position is the rail's. */ .whats-missing { position: sticky; top: var(--h-header-real, var(--h-header)); } /* The rows are **one list, separated once** — BL-175. They used to be direct children of .panel-body, which is a flex column with `gap: var(--s-4)`, so every hairline between two rows came with 16px of gap on top of it: thirteen gaps, 208px, separating a list that its own hairlines already separate. The wrapper is the idiom of .list-steps, for the same reason it exists there. */ .whats-missing-list { display: flex; flex-direction: column; } /* One item = one thing that is missing: the dot carries the state, the name says what it is, the state stands in words at the right edge, and the whole row is the way there — a two-word link is a target on a hairline (§6). **One row, one line** (BL-175). It was a flex row with the state on a second line under the name, which is 57px × 14 rows, and the rail's bottom then had nowhere to be scrolled to (§5, the trap BL-77 hit in the calculator's summary). The grid is what makes the single line hold: the name track is `minmax(0, 1fr)` so it yields first, and the state track is `auto` so a word never breaks to save a name that could have wrapped instead. Written as a grid and not `margin-left: auto` on the hint for exactly that reason — the flex version squeezes nothing and grows the row instead. The state track only holds while the state is a **word**. A sentence in it collapses to min-content — one word per line — and takes the row to 341px, which is why the foot's message is a state and not a sentence (application.html). */ .whats-missing-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); min-height: var(--h-control); padding: var(--s-2) 0; border-bottom: 1px solid var(--border); color: var(--ink); text-decoration: none; } .whats-missing-item:last-child { border-bottom: 0; } /* Only the clickable variant reacts to the mouse: the item of a screen the member may not open is not a link (§6, the same rule as .list-row--link). */ a.whats-missing-item:hover { background: var(--surface-2); } /* The state reads back from the right edge, against the name it belongs to. */ .whats-missing-item .hint { text-align: right; } /* The ratio is the panel's headline and rides in the header since BL-175, where a panel writes what it is worth — .readiness-head with its track was 58px of the one column that has none to spare, and the catalogue names the head as the part that gives way (§4.3). The step is the heading's, the same one the head gave it (§1.2). */ .whats-missing > .panel-header .mono { font-size: var(--t-md); } /* §5.1: below 1180 px the rail stops being a column. What it does instead has two answers, and this block writes both of them. Without a script it drops under the content and stops being sticky — a block the page has already scrolled past has nothing left to stick to. Its place in the grid has to be said: auto-placement would put it in the second row of the **navigation's** 230px track and render the panel 230px wide. With `web/js/rail.js` it becomes the bar below (BL-580), and `--rail-bar` is how the script is told: the breakpoint is a decision of §5.1 and stays here in the stylesheet, so the script asks which side of it the window is on rather than repeating 1180 as a fourth home for the number. */ @media (max-width: 1180px) { .workspace:has(> .whats-missing) { grid-template-columns: 230px minmax(0, 1fr); } .whats-missing { position: static; grid-column: 1 / -1; --rail-bar: 1; } } /* Under 860 px the whole workspace is one column (§5.1). Restated for the `:has()` selector because its specificity (0,2,0) outranks the unconditional one-column rule above. */ @media (max-width: 860px) { .workspace:has(> .whats-missing) { grid-template-columns: minmax(0, 1fr); } } /* --- The rail as a bar (BL-580) -------------------------------------------- Below the breakpoint the panel is moved by `web/js/rail.js` to the head of `.content` and marked; here it becomes a bar under the header, folded to its own headline — the heading and the ratio — until the reader asks for the list. Until BL-580 the rule here was the opposite one, and it was written down twice: the rail "never becomes a disclosure — what is missing before submission is the one thing that must not need opening" (§4.3). That argument was made for a column standing beside the work, and it holds there: **above the breakpoint nothing folds and nothing may.** Below it the same sentence was buying nothing, because the panel it defended stood 5 496 px under the header of the step Prílohy on a 390 px phone (measured, UX-13) — open, and unreachable. A closed bar with the number in its head is what an open panel nobody scrolls to was pretending to be. The panel is a **flow** element here, not a fixed one: it reserves its own height, never has to be told the width of the sidebar or of the open help panel, and its place in the DOM is its place on the screen (§5.1). The offset is `--h-header-real`, written by the script, because `--h-header` is a `min-height` and the header wraps as soon as it runs out of room, at no breakpoint at all: 65px of header at 950px of window, 113px at 900px, 134px at 390px, against a token that says 65px throughout. The fallback keeps the rule truthful above ~950px, where the two are the same number, and without the script, where nothing has moved anyway. */ .whats-missing[data-rail="bar"] { position: sticky; top: var(--h-header-real, var(--h-header)); z-index: 10; /* Opened, fourteen rows of --h-control are 714px against the 710px a 390px phone has under its header: the bar has to stop at the viewport and let the list scroll inside it, or its bottom is where nobody can reach — the trap BL-77 hit in the calculator's summary and the whole reason the rail carries states and not sentences. Measured from `--rail-top`, which the script writes at the moment the bar opens, not from the sticky offset: at the top of the page the bar starts below the header, the tab strip of the sidebar and the padding of the screen, so the offset would promise 97px the bar does not have there. The fallback is the offset, for the closed bar and for a browser between the script and the first fold, where the promise is not being cashed. `dvh` first for the phone whose toolbars come and go; `vh` under it for anything that has not heard of `dvh` yet. */ max-height: calc(100vh - var(--rail-top, var(--h-header-real, var(--h-header))) - var(--s-5)); max-height: calc(100dvh - var(--rail-top, var(--h-header-real, var(--h-header))) - var(--s-5)); } /* The list is what scrolls, never the whole bar: the head carries the number and has to stay legible while the reader walks the rows. `min-height: 0` because a flex item's floor is its content, so without it the body would grow past the bar instead of scrolling inside it (§5.2, the same rule that makes a wide table scroll in its frame). */ .whats-missing[data-rail="bar"] > .panel-body { overflow-y: auto; min-height: 0; } /* Folded is a state of the panel, and a state is an attribute (§4.1) — the very one the toggle carries for the reader, so there is no second bookkeeping to drift out of step. **Not `hidden` on the body.** That attribute means "not here yet" and the base layer honours it with `!important` (§4.1, BL-351), which is right for a thing that is not part of the document and wrong for a list that is merely folded away on a narrow screen: on paper the fold has no meaning and the list has to come back, and an author `!important` in the base layer cannot be undone by `@media print` without a second one. */ .whats-missing[data-rail="bar"]:has(.whats-missing-toggle[aria-expanded="false"]) > .panel-body { display: none; } /* Folded, the head is the whole panel and the hairline under it would be a border on nothing — the same retreat `.panel--collapsible` makes when it closes. */ .whats-missing[data-rail="bar"]:has(.whats-missing-toggle[aria-expanded="false"]) > .panel-header { border-bottom-width: 0; } /* The fold's control. It stands `hidden` in the template and the script unhides it where the panel is a bar: without the script the rail is the panel it has always been, and a control that folds nothing must not be drawn (§6 — the same reason `.explainer-close` waits for `help.js` and `aria-pressed` for `theme.js`). Its name is the heading beside it (`aria-labelledby`), so the mark it carries is drawn and not written — a chevron typed as text is read out as a character, exactly as `.panel--collapsible` explains. */ .whats-missing-toggle { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: var(--h-control); min-height: var(--h-control); padding: 0; border: 0; background: none; color: var(--ink-soft); cursor: pointer; } .whats-missing-toggle::after { content: ""; width: 0.5em; height: 0.5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg); } .whats-missing-toggle[aria-expanded="true"]::after { transform: translateY(25%) rotate(225deg); } @media (prefers-reduced-motion: no-preference) { .whats-missing-toggle::after { transition: transform 120ms ease; } } /* --- Calculator plane ------------------------------------------------------ The informative calculator: the input panels on the left, the summary of the result on the right and sticky under the header. It exists because these numbers are read *while* they are typed — two panels lower the user corrects a cost without seeing what the correction did, which is the blindness the guardrails are there to end (design-system.md §4.3). It is not .workspace: that one carries the sub-navigation of a screen on the left, here the left column is the content itself. */ .calculator { display: grid; grid-template-columns: minmax(0, 1fr) 26rem; align-items: start; gap: var(--s-6); } /* `minmax(0, 1fr)` above and `min-width: 0` here are one rule stated twice: a grid item's automatic minimum is its content, so the table of purposes would widen the column instead of scrolling inside its own frame (§5.1). */ .calculator-inputs { display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; } /* The save bar of the calculator stands **outside** a panel: what it saves is the whole form, not one section of it, and a panel around it would put a fourth, unnumbered card into a column of three numbered ones — the contradiction BL-128 removed. Out there it has no frame to borrow, so it draws its own: the shorthand replaces the top hairline the bar wears as a panel's footer, and the radius closes all four corners instead of the bottom two. */ .calculator-inputs > .save-bar { border: 1px solid var(--border); border-radius: var(--r); } /* The offset is what the header measures plus the gap, for the reason `.whats-missing` states above: the token is a `min-height`, and at 1200px of window the header wraps to 113px while the token says 65, so the head of the summary sat 32px under it (BL-721). */ .calculator-summary { position: sticky; top: calc(var(--h-header-real, var(--h-header)) + var(--s-4)); display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; } /* A guardrail card standing directly in the summary needs a plane of its own: the column sits on --bg and .guard is nothing but a left bar. A summary that wraps its cards in a .panel is untouched — the cards are then no longer its children. */ .calculator-summary > .guard { background: var(--surface); border-radius: 0 var(--r) var(--r) 0; padding: var(--s-3) var(--s-4); box-shadow: var(--shadow); } /* The summary drops under the inputs before either column gets too narrow to read — 26rem of summary beside a five-column table of purposes is the floor. Below the break it stops being sticky: a block the page has already scrolled past has nothing left to stick to. */ @media (max-width: 1180px) { .calculator { grid-template-columns: minmax(0, 1fr); } .calculator-summary { position: static; } } /* --- Screen typography ----------------------------------------------------- */ .eyebrow { font-size: var(--t-micro); text-transform: uppercase; /* The identity's tracking for a section eyebrow, from tokens — a component that writes the number by hand is that value's second home (§1). */ letter-spacing: var(--ls-eyebrow); /* The accent is prescribed by §3: an identity element, and the only shade that holds contrast at --t-micro in both themes. */ color: var(--accent); } .page-h { font-family: var(--serif); font-size: var(--t-lg); font-weight: 600; margin: 0; text-wrap: balance; } .section-h { font-size: var(--t-md); font-weight: 600; margin: 0; text-wrap: balance; } .subtext { color: var(--ink-soft); max-width: 65ch; } .screen-header { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: baseline; } /* The screen heading is where the longest names land — a building's, an organization's. `overflow-wrap` on its own cannot save them: a flex item's automatic minimum is its content, so an unbroken IBAN or e-mail widened the group before the text was ever offered a chance to break. */ .screen-header > * { min-width: 0; } /* --- Panel and form section ------------------------------------------------ */ /* `min-width: 0`: a panel is a flex item, and a flex item's automatic minimum size is its content — so a wide table inside stretched the panel past the screen instead of scrolling in its own frame. */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0; } .panel-header { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: baseline; } /* The sentence that says what follows from the panel takes a line of its own: in the header's wrap it would otherwise be squeezed between the heading and the pill. It keeps the measure of prose (§3) and loses the paragraph's default margin, which the header's baseline row does not expect. */ .panel-header .hint { flex-basis: 100%; margin: 0; max-width: 65ch; } .panel-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); } /* Filter over a listing that asks a single question — `components/filters.html` (#581). Not a `.panel`: a heading saying *Filtre* over one input that already carries its own label, plus a save bar under it, cost 260 px before the first row of the list they narrow. The row is the same GET form with the same controls in the same order (§4.3), laid out on one line. `align-items: center`, the same answer `.field-action` gives and not the `end` of `.picker-search`: `.field` is a column of label over widget over `.hint`, and both filters that take this shape carry a hint — so the bottom edge is the hint's, two lines below the input, and buttons aligned to it would sit under the field rather than beside it. Centred against the whole block, they meet the input, which is the control they act on. `flex-wrap` lets the pair drop under the field at the narrow widths of §5.1 instead of squeezing the input to nothing — hence the growing field with a floor of its own, and buttons that never shrink. No plane, no border, no radius. The row is a control above a table, and a second frame around it would read as a panel that lost its heading. */ .filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); } .filter-row > .field { flex: 1 1 min(22rem, 100%); } .filter-row > .actions { flex: 0 0 auto; } /* Pager under a long table — `components/pagination.html` (RQ-13, BL-598). Its own strip and not a `.save-bar`: that bar is the foot of a panel and says the section is saved on its own, while this is navigation over what the panel shows. It therefore sits **inside** `.table-frame`'s panel, under the table, with a hairline above it and the recessed plane the foot of a panel has. The sentence and the numbers are two rows on a narrow screen and one row from 640 px up: "Zobrazené 51–100 z 300" is the answer to "am I seeing everything", and squeezing it beside twelve digits is how it stops being read. The pages are `.btn--quiet` rather than a shape of their own — a page is a link and the application already has one link that looks like a control. What the current page adds is `aria-current="page"` and the accent pair, never the pair alone (§6). */ .pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r) var(--r); } .pager > .hint { margin: 0; } .pager-pages { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); } .pager-page { min-width: var(--h-control); justify-content: center; font-variant-numeric: tabular-nums; } .pager-page--on { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-ink); } .pager-gap { color: var(--ink-soft); padding-inline: var(--s-1); } /* A **modifier of .panel, never a second component** (§4.1): a destructive panel is a panel read differently, not a different anatomy. The border and the header carry --bad; the body deliberately does not, because a surface tinted throughout would read as an error state of the whole screen — and this is not an error. It is the one place on the screen where something irreversible can be done, and it says so before the click. The heading pair is the one .pill--bad already uses (--bad on --bad-soft). */ .panel--dangerous { border-color: var(--bad); } .panel--dangerous > .panel-header { border-bottom-color: var(--bad); background: var(--bad-soft); border-radius: var(--r) var(--r) 0 0; } .panel--dangerous > .panel-header .section-h { color: var(--bad); } /* A panel that folds away — again a **modifier of .panel, never a second component** (§4.1): the anatomy is unchanged, `
` merely carries it and the header is its ``. Native, so it opens with no JavaScript at all, which is the whole reason the reference table of the call may be closed by default. It is for a panel the reader typically does **not** read — reference beside work, uploaded attachments beside the ones still missing. Never over anything that blocks submission: closing a blocker hides it, and design.md §5 forbids a blockage without a way out, not merely a blockage. The affordance is drawn and not written: a glyph in `content` would be spoken by the very screen reader that already announces the open state of
. A square with two borders turned 45° is the chevron; the open state turns it up rather than swapping a second shape in. Dropping the native triangle takes **two** declarations, not one, because the engines draw it in two different places. Blink and Gecko give the `display: list-item` and the triangle is its `::marker`, so `.panel-header`'s own `display: flex` already removes it and `list-style: none` is what says so out loud; WebKit draws it as `::-webkit-details-marker`, a pseudo-element child no `display` on the summary reaches. */ .panel--collapsible > summary { cursor: pointer; list-style: none; } .panel--collapsible > summary::-webkit-details-marker { display: none; } /* The disclosure arrow, drawn rather than written: a glyph in `content` would be read out by a screen reader on top of the open/closed state `
` announces itself. **Three consumers, one drawing** — the collapsible panel, the framed switcher of saved calculations (#217) and the platform control the header collapses into below the breakpoint (BL-723). A second copy would drift the first time one of them changed its ink; the third consumer is the reason this list is a list and not two selectors. */ .panel--collapsible > summary::after, .calculation-switcher > summary::after, .platform-switcher > summary::after { content: ""; align-self: center; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(45deg); } .panel--collapsible[open] > summary::after, .calculation-switcher[open] > summary::after, .platform-switcher[open] > summary::after { transform: rotate(-135deg); } /* Closed, the header **is** the bottom edge of the panel, and its own hairline right above the panel's border read as a double line. */ .panel--collapsible:not([open]) > summary { border-bottom-width: 0; } /* --- The fold a panel gets from its width (BL-646) -------------------------- `.panel--collapsible` above is the domain's answer to "may this be closed" and it holds at every width. This is a different question — "is there room to hold it open" — asked of a panel the domain did **not** make collapsible, and answered only below 860px, where §5.1 puts the whole workspace in one column. Measured on the step Prílohy over `seed_dev` at 390px: 5 526px, 6,6 viewports, of which three open groups are 3 888px. (4 998px of it is what the step measured before this branch; BL-654 added 528 by giving eleven rows a third line.) The two groups the domain already folds carry the same kind of content — eight rows — in 138px. The length is not in what a group holds but in whether it stands open. **Not a `
`.** The state is only true below the breakpoint, and a `
` in the markup folds at every width, script or no script — the reason BL-580 gave when the rail needed the same thing, and the reason the desktop group would otherwise become foldable by the same markup. So the control is a button, the state is `aria-expanded` on it — the very attribute the reader is given, so there is no second bookkeeping to drift out of step (§4.1) — and the stylesheet reads it. `--panel-fold` is how the script is told which side of the breakpoint the window is on: §5.1 owns 860 and a fourth copy of it in a script is a second home for a decision that has one. The same instrument `--rail-bar` is for the rail. */ @media (max-width: 860px) { .panel:has(> .panel-header > .panel-fold) { --panel-fold: 1; } } .panel:has(> .panel-header > .panel-fold[aria-expanded="false"]) > .panel-body { display: none; } /* Folded, the head is the whole panel and the hairline under it would be a border on nothing — the same retreat `.panel--collapsible` makes when it closes. */ .panel:has(> .panel-header > .panel-fold[aria-expanded="false"]) > .panel-header { border-bottom-width: 0; } /* The fold's control. It stands `hidden` in the template and the script unhides it below the breakpoint: without the script the panel is the open one it has always been, and a control that folds nothing must not be drawn (§6). Its name is the heading beside it (`aria-labelledby`), so the mark it carries is drawn and not written — a chevron typed as text is read out as a character, exactly as `.panel--collapsible` explains. */ .panel-fold { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: var(--h-control); min-height: var(--h-control); padding: 0; border: 0; background: none; color: var(--ink-soft); cursor: pointer; } .panel-fold::after { content: ""; width: 0.5em; height: 0.5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg); } .panel-fold[aria-expanded="true"]::after { transform: translateY(25%) rotate(225deg); } @media (prefers-reduced-motion: no-preference) { .panel-fold::after { transition: transform 120ms ease; } } /* The ordinal of a panel that answers one question of a series (design-system.md §4.3). The number is the **reading order**, not a mandatory sequence — the calculator computes from the purposes and the maturity alone. Until BL-128 a sentence above the panels said so; now the column says it by its shape: exactly three numbered panels and nothing else, the name field riding in the save bar beneath them. The circle claims no state either: --accent is brand and order, never a state (§1.1), which is why it needs no second modality. The digit is --accent-ink and not --accent on this plane: both hold AA (5.00 light / 4.64 dark for --accent), but 11.5px bold is not where a ratio without reserve is trusted (§6), and --accent-ink on --accent-soft is the pair the active navigation item already uses (10.45 / 10.26:1). min-width and not width: a two-digit ordinal would overflow a fixed circle, and 999px turns it into a stadium instead of clipping it. The size is in rem because a badge grows with its text — the same reason --w-field-* are (§1.4). */ .step { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 1.5rem; height: 1.5rem; padding-inline: var(--s-1); border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-family: var(--mono); font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; } /* Section save bar — confirms that the section is saved on its own (§4). */ .save-bar { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r) var(--r); display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; } /* Small text on a recessed plane: --ink-soft, never --ink-muted (§6). */ .save-bar .time { font-size: var(--t-xs); color: var(--ink-soft); } /* Only the offset is contextual here — the group itself is a block of its own. */ .save-bar .actions { margin-left: auto; } /* A panel merged from two records of one section carries a bar per record (§4.3), and a bar that is not the panel's foot must not draw one: the bottom radius is the panel's own corner, so mid-panel the --surface of the panel showed through both of them and the strip read as the panel ending. The hairline closes it against the record that follows. */ .panel > form:not(:last-child) > .save-bar { border-radius: 0; border-bottom: 1px solid var(--border); } /* Selection bar of a list — the act over what is ticked in the table above (§4.3). Not a modifier of .save-bar: the anatomy is the same, but a save bar is the foot of a panel and does not move, while a selection over a hundred rows is made at the bottom of the screen with that foot long out of view. A modifier would lie about what the component does. */ .selection-bar { position: sticky; bottom: 0; z-index: 2; padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r) var(--r); display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; box-shadow: var(--shadow); } .selection-bar .time { font-size: var(--t-xs); color: var(--ink-soft); } .selection-bar .actions { margin-left: auto; } .field { display: flex; flex-direction: column; gap: var(--s-1); } .field > label { font-size: var(--t-sm); color: var(--ink-soft); } /* The label of a field lives in a wrapper since BL-533, so that the explainer can stand beside it. A descendant combinator does not reach through a real element, so the rule above has to be repeated for the wrapped shape — the alternative was wrapping only the two fields that carry a mark, i.e. two shapes of the same pattern. The checkbox branch of `components/field.html` stays unwrapped and keeps the rule above. */ .field > .field-label > label { font-size: var(--t-sm); color: var(--ink-soft); } /* The floor is on **every** label row and not only where a mark stands (BL-640): the explainer's circle is `--s-5`, a hair more than the 19.4px line box of a 12.5px label, and a hair is all it takes to put the inputs of one `.grid` row at two heights. The floor makes the two shapes measure the same rather than nearly the same, so the row stays level whichever of its fields the fund defines in its own words. */ .field-label { display: flex; align-items: center; gap: var(--s-1); min-height: var(--s-5); } /* The same wrapper for the checkbox branch (BL-620). It exists so the explainer can stand **beside** the `