/* SAB Portal — the cascade, declared once.
 *
 * Read this file before any other stylesheet here. It is four lines of CSS and
 * it is the reason the rest of them can be read one at a time.
 *
 * --- Why a layer at all -------------------------------------------------
 *
 * Pico supplies the look of an unclassed element — a table, a form, a button.
 * The portal then says something different about a few of them. Without
 * layers, "says something different" means "wins the cascade", and winning the
 * cascade means being more specific than whatever Pico wrote. That is a
 * negotiation with a file nobody here maintains, it is invisible in the rule
 * that lost it, and its two outcomes are a selector stacked up until it works
 * and `!important`. There are currently none of either, and this file is how
 * it stays that way.
 *
 * A cascade layer settles it by declaration instead. `@layer vendor, app`
 * says: when a vendor rule and an app rule both match, the app rule wins —
 * whatever the selectors look like. So a component is styled with the plainest
 * selector that names it, and stays styled that way when someone later adds a
 * rule elsewhere.
 *
 * Pico is pulled in here with `@import` rather than a `<link>` because a
 * stylesheet that arrives through `<link>` is unlayered, and an unlayered rule
 * beats every layered one. Importing it is what puts it in `vendor`. This is
 * the file's one round trip and it buys the whole arrangement.
 *
 * Open Props is not imported: it defines custom properties on `:root` and
 * declares nothing that can conflict, so it stays a `<link>` in base.html and
 * is fetched in parallel.
 *
 * --- Why one app layer and not six --------------------------------------
 *
 * The obvious next step is a layer per file — `tokens, frame, components,
 * pages` — so that a page always beats a component. That is the arrangement to
 * avoid. It makes "the page restyles the component" the path of least
 * resistance, and that rule is the one thing standing between this directory
 * and a second definition of every component. A page that needs a component to
 * look different asks the component for it; see CLAUDE.md § Components.
 *
 * One `app` layer also means the order within it is plain source order — the
 * order of the `<link>` tags in base.html, which is the order below. Nothing
 * about the cascade changed when app.css was split into these files, and
 * nothing about it changes when a file is added, as long as it is added to
 * base.html in its place and wrapped in `@layer app`.
 *
 * --- The directory ------------------------------------------------------
 *
 *   layers.css       this file: the layer order, and Pico.
 *   tokens.css       the typeface, the palette, and every --sab- property.
 *                    The only file allowed to name an Open Props property or
 *                    write a raw length. portal/tests/test_css_tokens.py.
 *   frame.css        the window, the sidebar, the account block, the page
 *                    header — what every signed-in page carries.
 *   overview.css     the overview page and its ring.
 *   listing.css      an owner's pages: company row, state bar, tabs,
 *                    breadcrumb, and everything a data table is made of.
 *   values.css       one measured value: state pills, last contact, capture
 *                    time, freshness, absence.
 *   detail.css       a detail page: the box, the pipe, the cards, the note.
 *   signin.css       sign in.
 *   recordings.css   the recordings page and the calendar.
 *   feedback.css     the Feedback panel and the ticket pages.
 *   responsive.css   what a narrow window does.
 *   map.css          the fleet map and Leaflet's furniture.
 *
 * --- Adding a file ------------------------------------------------------
 *
 * A new stylesheet here is a new component or a new page, and it needs three
 * things, all of which portal/tests/test_css_files.py checks:
 *
 *   1. `@layer app { ... }` around everything in it.
 *   2. A `<link>` in base.html, in the position it occupies in the list above.
 *   3. A line in that list.
 *
 * Splitting an existing file is the same three steps and no rule moves. That
 * is the property worth keeping: this directory grows by adding a file, never
 * by making one longer. */

@layer vendor, app;

@import url("../vendor/pico.min.94cbb1d0170a.css") layer(vendor);