/* components/index.css - the single entry point of the system.

   One link on a page pulls the whole thing in, in a fixed cascade order:
   tokens first (the values), then base (the frame), then the components.

   THE COMPONENT ORDER IS A PART BEFORE THE WHOLE THAT HOLDS IT, and the order
   below is the one `ui-kit/docs/inventory.md` declares. It is read, not computed:
   a level is one plus the highest level of what a component CONTAINS, and that
   arithmetic is blind to a component built out of its own class names, so the
   inventory declares each level with a reason and this file follows it.

   Why it has to be that way round. Several components carry rules of equal
   specificity that reach the same element (an h3 inside a chart head and an h3
   inside a section, a dropdown and a filter panel), and there the file imported
   LAST wins. So the file that describes the smaller thing has to be the one that
   can be overridden, not the one that overrides: a card may restyle the odds bar
   it contains, an odds bar may not quietly restyle every card.

   What this replaced, and what it was worth. Until 2026-08-03 the order was the
   order the rules had been layered in inside the flat kit they were read out of,
   which put TWENTY FIVE wholes ahead of their parts: header before button, feed
   before card, card before both of the controls it holds. Nothing rendered
   wrong, because no two files write the same selector any more, which is exactly
   why no sweep could see it: a cascade defect is invisible until the day someone
   adds the rule that collides.

   REORDERED AGAIN ON 2026-08-07, and the second time it was the levels that were
   wrong rather than the order. The inventory found eight files filed at a level
   they do not hold: `toast`, `navitem` and `yesno` were molecules and hold
   nothing, so they are atoms; `trustbar` and `market` were atoms and hold their
   own named parts, so they are molecules; `bottomnav`, `position`, `notice`,
   `options` and `state-block` were organisms and hold atoms, so they are
   molecules. Nine files moved. Measured before and after over 68 renders, 17
   screens at 390 and 1280 in both themes, 39,104 elements: every box, colour,
   border, radius, face, size, weight, leading, tracking, padding, margin, gap,
   display, opacity and shadow identical. That is the whole point of the move.
   A reorder that changed something would have been a reorder that was overdue.

   Alphabetical order would quietly change those outcomes, and so would adding a
   component at the end. A new component is added HERE, once, in the level group
   the inventory gives it, instead of being wired into every screen.
   No em dash. */

/* The faces first: they are values like the tokens are, and a page that
   links this file must not also have to link a font host. See fonts.css
   for why they are served from this repo. */
@import url("fonts.css");
@import url("tokens.css");
/* The four trust drawings are values too, and they are here rather than in the
   three files that draw them because a mask image is a CORS-enabled fetch and
   these pages are read from disk. trust-art.css says the rest. */
@import url("trust-art.css");
@import url("base.css");
@import url("course-chrome.css");

/* ---- Level 1, atoms: one control, holding nothing from the system ---- */
/* logo added 2026-08-11 with the rename to Yonder. It is an atom by the same
   reading as the odds bar below it: it holds nothing, and it is not a control
   in the footer, where it goes nowhere. It has to load HERE rather than beside
   the shells, because header and footer both hold it and both restyle where it
   stands. What it replaced was the same lockup written in those two files, one
   of them with the mark's colour typed into it and therefore unthemeable. */
@import url("logo.css");
/* platehead added 2026-08-11 by backlog 108, and it is here for the logo's
   reason word for word: it holds nothing from the system, and the two wholes
   that hold it both load at level 3 and both restyle where it stands. dialog.css
   says a sheet head is 24/20/20 and its title runs to 15ch, hiw.css says the
   how-it-works head is 32/24/28 and its title is --display-hiw; neither may
   quietly redraw the other's ground. On a tie the file imported LAST wins, so a
   face imported here can be overridden by a host imported there, which is the
   direction this file exists to enforce. What it replaced was the same six rules
   in those two files, agreeing to the byte because somebody had edited one of
   them by hand that morning to make them agree. */
@import url("platehead.css");
@import url("oddsbar.css");
@import url("button.css");
@import url("iconbtn.css");
@import url("input.css");
/* search added 2026-08-16, and it sits beside input rather than inside it: the
   file itself argues why, and the level is the same reading as the field it
   stands next to. It holds `.icon-btn` in one slot and that is not containment
   for this arithmetic, because the clear button is a placement of another atom
   and not a part this file draws. */
@import url("search.css");
@import url("crumb.css");
@import url("toggle.css");
@import url("chip.css");
@import url("skeleton.css");
/* navitem, yesno and toast moved up from the molecule group on 2026-08-07. The
   inventory declares all three as ONE CONTROL: a nav item is a row that goes
   somewhere and draws nothing until pointed at, the outcome pair is one control
   whose halves cannot exist apart, and a toast holds an icon button and nothing
   a person would name. Each had to be here rather than there, because the whole
   that holds it loads below: bottomnav holds navitem on 164 readings, options
   and betpanel and card hold yesno, header and footer hold toast. */
@import url("navitem.css");
@import url("yesno.css");
@import url("toast.css");

/* ---- Level 2, molecules: they hold atoms, or their own parts and nothing
   else. Nothing in this group holds anything else in it. ---- */
@import url("related.css");
/* loadmore moved out of the atom group on 2026-08-07, and it moved for the same
   reason catnav did the day before: what stands in it is a `.chip` now, so it is
   a whole that holds a part and it has to load after the part. Its control was
   the category chip drawn in a second file; what is left of the component is the
   centred row at the foot of a feed. Backlog S41. */
@import url("loadmore.css");
@import url("quick.css");
@import url("comments.css");
@import url("filters.css");
/* account.css was here and was DELETED on 2026-08-08. It held two rules and both
   were the action bar's stone: the surface a bar needs when it floats, and the
   three declarations .flat took it away with. Nothing floats, so nothing wore it.
   The bar is one face now and the whole of it is patterns/action-bar.css.
   Backlog 63, and the account is in ../docs/decisions.md. */
@import url("cookie-consent.css");
/* toc, seo-plate, trustbar and market moved DOWN out of the atom group on
   2026-08-07. Each is built entirely out of its own class names, which is the
   blind spot the level arithmetic has: a component made of its own parts reads
   as containing nothing and answers 1. Read on the screens rather than counted,
   trustbar holds three items each of a mark and a line, market holds a question,
   a rule and a source, and seo-plate holds its own prose blocks. */
@import url("toc.css");
@import url("seo-plate.css");
@import url("trustbar.css");
@import url("market.css");
/* catnav moved here on 2026-08-07, and the cascade is what moved it. It used to
   sit above navitem, because it drew its own chips and held nothing of anyone
   else's; now every chip in it is a `.chip`, so the band is a whole that holds a
   part and it has to load after the part does. A category strip may restyle the
   chips standing in it; a chip may not quietly restyle every band. */
@import url("catnav.css");
/* bottomnav, position, notice, options and state-block moved UP out of the
   organism group. Each holds atoms and nothing more: the bar holds the slot, the
   row holds a skeleton, the notice and the empty block hold a button, the option
   list holds the outcome pair. A row in a list is not a shell. */
@import url("bottomnav.css");
@import url("position.css");
@import url("notice.css");
@import url("options.css");
@import url("state-block.css");

/* ---- Level 3, organisms: they hold molecules, or they are the shell of a
   screen. Inside the group, the shallower nesting comes first. ---- */
@import url("header.css");
@import url("hero.css");
@import url("footer.css");
@import url("dialog.css");
@import url("bets-table.css");
@import url("card.css");
@import url("hiw.css");
@import url("betpanel.css");
@import url("tabs.css");
@import url("feed.css");
@import url("profile.css");
@import url("event-detail.css");
@import url("chart.css");

/* ---- patterns: stable compositions of the components above ----
   They load LAST because that is what "assembled from" means in a cascade:
   a pattern has to be able to place what it holds, and a rule that places
   something has to be read after the rule that draws it. The faces and the
   tokens pin the head of this file for the mirror reason. */
@import url("patterns/action-bar.css");
@import url("patterns/browse-shell.css");
@import url("patterns/card-grid.css");
@import url("patterns/detail-shell.css");
@import url("patterns/list-head.css");
@import url("patterns/position-list.css");

/* LAST, and the order is the rule: print.css re-states selectors that every file above
   has already drawn, so a print rule any of them could override would be a print rule that
   does nothing. It declares no component and has no page in the kit. docs/backlog.md 125. */
@import url("print.css");