/* ============================================================================ Tendd design system - the single entry point. A product loads THIS and nothing else. One link, and the whole system arrives: the tokens first, the base second, then every component in the order of the component ladder. THE ORDER IS BY LEVEL AND NEVER ALPHABETICAL, and the reason is mechanical rather than tidy. Alphabetically `dialog.css` comes before `field.css` and `form.css` before `input.css`, which puts a composite HIGHER in the cascade than its own parts. The first time a container needs to correct something inside it, the only tool left is !important, and a system carries that for years. Sorted by level the problem cannot arise: a part is always declared before the thing that contains it. Inside organisms there is one more turn of the same screw. The ladder has three rungs and no fourth, but an organism can contain an organism (the shell holds the app bar, the panel holds a divided list). So inside that group the ones that contain no other organism come first, and the ones that do come last. ADDING A COMPONENT: put its @import in ITS OWN LEVEL GROUP, not at the end of this file. Appended at the end it looks harmless and it is exactly how the ladder comes apart. The other four things a component needs are listed in design/kit/docs/architecture.md. Stage 09 added the patterns/ shelf below organisms, with no move: three files, imported last, listed at the foot of this file. ============================================================================ */ @import url("tokens.css"); @import url("base.css"); /* ---------------------------------------------------------------- atoms --- Contains nothing else from the kit. One visual element, one content slot. 20 in the system; 18 arrived in the atom rounds of step 5, and the two brand atoms on 2026-08-12, when the founder locked the mark. */ @import url("components/amount.css"); @import url("components/big-total.css"); @import url("components/brand-mark.css"); @import url("components/brand-wordmark.css"); @import url("components/button.css"); @import url("components/chart-placeholder.css"); @import url("components/checkbox.css"); @import url("components/chip.css"); @import url("components/destination-icon.css"); @import url("components/eyebrow.css"); @import url("components/label.css"); @import url("components/logo.css"); @import url("components/meta-row.css"); @import url("components/muted-line.css"); @import url("components/quiet-line.css"); @import url("components/readout.css"); @import url("components/select.css"); @import url("components/skeleton-bar.css"); @import url("components/step-forward-link.css"); @import url("components/text-input.css"); /* ------------------------------------------------------------ molecules --- Two or more content slots in one unit, or hosts an atom. 23 in the system. */ @import url("components/action-row.css"); @import url("components/alert-item.css"); @import url("components/charge-list.css"); @import url("components/detail-hero.css"); @import url("components/door.css"); @import url("components/form-field.css"); @import url("components/group-head.css"); @import url("components/merchant-chip-group.css"); @import url("components/nav-row.css"); @import url("components/numbered-steps.css"); @import url("components/pair-list.css"); @import url("components/plan-option.css"); @import url("components/preset-tile.css"); @import url("components/promise-list.css"); @import url("components/range-picker.css"); @import url("components/share-card.css"); @import url("components/subscription-row.css"); @import url("components/summary.css"); @import url("components/switch-row.css"); @import url("components/text-block.css"); @import url("components/trust-block.css"); @import url("components/wash-block.css"); /* ------------------------------------------------------------ organisms --- Hosts a molecule, or is a screen shell, or is a container of repeated units. 28 SINCE 2026-08-20, when the save-focus candidate finally climbed the rung its own definition put it on: it hosts a molecule, and the ladder above says a thing that hosts a molecule is an organism. It had been filed as a molecule since the molecule round and the reason it stayed was never the ladder - it was that moving it changes this import order, which nobody wanted to do mid-round. Founder, 2026-08-20. It was 27 since the category bars arrived on 2026-08-19, eleven of them the public page's: five at the rollout, the landing story on 2026-08-14, the landing orbit the same day as a candidate second hero, and the landing steps, paths, facts and plan on 2026-08-15, when the founder rebuilt those four blocks. The orbit stopped being a candidate the same day: it is the hero, and the centred one went with its page. Those containing no other organism first, then those that do: app shell, panel, dialog sheet, empty block, landing bar, landing hero, site footer. */ @import url("components/app-bar.css"); @import url("components/save-focus-candidate.css"); @import url("components/tab-bar.css"); @import url("components/faq-list.css"); @import url("components/reveal-step.css"); @import url("components/card.css"); @import url("components/category-group.css"); @import url("components/category-bars.css"); @import url("components/divided-list.css"); @import url("components/grid.css"); @import url("components/save-focus-list.css"); /* and these contain an organism of their own: the dashboard head hosts the save-focus list, the groups column set hosts the category group, the dialog sheet and the empty block host the grid, the panel hosts the divided list. */ @import url("components/dashboard-head.css"); @import url("components/dialog-sheet.css"); @import url("components/empty-block.css"); @import url("components/groups-column-set.css"); @import url("components/panel.css"); /* THE PUBLIC PAGE. Each of these hosts an organism of its own: the landing bar holds the brand lockup and a button, the story holds the divided field and the list it becomes, the footer holds the lockup again. They are LAST among the organisms and before the two shells for the same reason app-shell.css is last of all: a container is imported after the things it contains. THE STORY REPLACED TWO COMPONENTS ON 2026-08-14, on the founder's decision: landing-window.css (a field of squares in the hero) and landing-cut-list.css (the same fourteen as a list further down) said one thing in two places and moved the reader between them with a cut. One pinned stage says it once. */ @import url("components/landing-bar.css"); @import url("components/landing-hero.css"); @import url("components/landing-orbit.css"); @import url("components/landing-story.css"); @import url("components/landing-steps.css"); @import url("components/landing-paths.css"); @import url("components/landing-facts.css"); @import url("components/landing-plan.css"); @import url("components/landing-final.css"); @import url("components/site-footer.css"); /* and these two contain every organism above them: the shells. Last in the file, which is the whole point of ordering by level rather than by name. */ @import url("components/app-shell.css"); @import url("components/landing-shell.css"); /* ------------------------------------------------------------- patterns --- A settled composition of the components above, standing on three screens or more. Below them in the file for the same mechanical reason the ladder itself is ordered: a pattern is assembled FROM components, so it has to be able to correct the rhythm between them, and a rule that has to win cannot be declared first. 3 in the system, all from stage 09. A pattern declares no colour, no type and no visual decision of its own. If one is needed, the answer is a component or a variant, and it is built before the pattern that wanted it. */ @import url("patterns/interruption.css"); @import url("patterns/act-foot.css"); @import url("patterns/list-column.css"); /* --------------------------------------------------------------- the last word --- ONE RULE LIVES IN THIS FILE RATHER THAN IN A COMPONENT, and it is here because what it needs is not specificity but ORDER, which is the one thing this file owns. `[hidden]` is a fact about an element: it is not in the page. The browser says so at 0-1-0, from its own stylesheet, and any component that declares `display` beats it. Two in this system do it on elements a screen legitimately hides: `.metarow` is `display: flex` and `.muted` is `display: block`, both at 0-2-0. Authoring `hidden` on either of them today does nothing at all, silently, and the markup looks correct while the screen shows every state at once. behaviour.js met the same trap on `.tile` in stage 08 and worked around it with a runtime inline style, which was right for a filter that only exists when a script runs. It is not right for a screen that must be correct with no script: the three range views of History and trends are hidden in the AUTHORED markup, so that with nothing running the screen is the three-month view and not all three stacked. 0-2-0 against 0-2-0 is a tie, and a tie is settled by source order. This is the last line of the last file, so it wins over every component without !important, without a compound-selector trick, and without touching the two components, whose own `display` values are correct for an element that IS in the page. -------------------------------------------------------------------------------- */ .app [hidden], .landing [hidden] { display: none; }