/*
 * The layout links every stylesheet of this application with `application_stylesheet_link_tag`,
 * see app/helpers/application_helper.rb. Propshaft sorts those files by name, so the cascade
 * follows the filename:
 *
 *   01_reset       browser defaults, including the dialog and popover reset
 *   02_tokens      custom properties (colors, spacing, radii, fonts)
 *   03_base        element defaults built on the tokens
 *   04_layout      page shells (sidebar, top bar, auth card)
 *   05_components  reusable pieces without a component yet (table)
 *   06_controls    the .control box that every form control and button shares
 *   07_choice      the .choice label that the checkbox, radio and icon picker share
 *   08_glass       the .glass translucent surface
 *   09_inbox       the inbox screen, including the pile of cards
 *   10_choice_grid the .choice-grid of tiles that the pickers share
 *   11_chevron     the .chevron that turns when the control it sits in opens
 *   12_gallery     the component gallery, /rails/view_components
 *   application    this file
 *   <component>    app/components/ui/<name>/assets/<name>.css, loaded last
 *
 * Give each new file in this folder a number prefix to put it in the right place.
 *
 * A component owns its own CSS. It lives next to the Ruby class, in
 * app/components/ui/<name>/assets/<name>.css, and loads after everything here.
 *
 * Class names follow BEM:
 *
 *   .block            named after the component: .button, .field
 *   .block__element   .field__label, .field__input
 *   .block--modifier  .button--primary, .field--invalid
 *
 * Do not use separate state classes such as .is-current. Write a modifier.
 *
 * Four classes cross component borders, and each lives in a numbered file because a numbered file
 * loads before every component.
 *
 * .control is the box you type in or press. A button, a text input or a select carries it, so all
 * of them keep the same height, border, radius and background.
 *
 * .choice is a label wrapping a hidden input and a painted indicator. The checkbox, the radio and
 * the icon picker carry it, so the press, the focus ring and the indicator stay one thing.
 *
 * .glass is a translucent surface with a backdrop filter.
 *
 * .choice-grid is a grid of tiles you pick from, so the tile, the hover, the focus ring and the selected paint stay one
 * thing. Its --labelled modifier is the tile with a name under the icon.
 *
 * The component adds only what is its own.
 *
 * This file has no rules. It loads after the numbered files, so put a rule here only when it
 * must override everything else.
 */