/* =====================================================================
   NUTRIDESK · desk_app — stylesheet manifest
   ---------------------------------------------------------------------
   Imports are depth-first and in place, so THIS ORDER IS THE CASCADE.
   Same arrangement as the v2 CRM, for the same reason: one file to read
   when a rule is being overridden and nobody can say where.

   Nothing below tokens may contain a literal colour. If a component
   needs a shade that is not here, the token set is missing one — add it
   there, not in the component.
   ===================================================================== */

/* ---- base: tokens first, because everything reads them ---- */
@import url("./css/base/tokens.css");
@import url("./css/base/base.css");
@import url("./css/base/util.css");

/* ---- layout: the shape of a page ---- */
/* masthead.css is NOT imported. It styled a horizontal bar, which
   was my invention; the reviewed mockup has a left sidebar. The file
   is kept so the diff is readable, but it is out of the cascade. */
@import url("./css/layout/sidebar.css");
@import url("./css/layout/page.css");
@import url("./css/layout/gate.css");

/* ---- components: things that appear on more than one page ---- */
@import url("./css/components/button.css");
@import url("./css/components/card.css");
@import url("./css/components/stat.css");
@import url("./css/components/table.css");
@import url("./css/components/badge.css");
@import url("./css/components/row.css");
@import url("./css/components/state.css");
@import url("./css/components/diary.css");
/* The week/month/year overview. Its own file, after diary.css, because
   the day detail stands alone without any of it. */
@import url("./css/components/diary-views.css");
@import url("./css/components/messages.css");

/* ---- ported wholesale from the reviewed mockup ----
   These carry the classes the mockup already uses, split out of its
   single <style> block by selector. shared.css is the remainder: the
   pieces used on more than one screen, plus the ones whose home was
   not obvious. Prefer moving a rule OUT of shared over adding to it. */
@import url("./css/components/clients.css");
@import url("./css/components/today.css");
@import url("./css/components/assessment.css");
@import url("./css/components/plan.css");
@import url("./css/components/reports.css");
@import url("./css/components/room.css");
@import url("./css/components/shared.css");

/* Every row of tabs on the desk, behaving as one object. AFTER the
   ported files, because it is correcting them: shared.css sets .tabs
   and .subtab itself, and an earlier import would simply lose to it. */
@import url("./css/components/strip.css");

/* Operations. Its own door, its own lock, its own page with no
   sidebar -- so it needs a rule to undo the body flex row. */
@import url("./css/components/ops.css");

/* Last, because they override: a query must beat the rule it is
   narrowing.

   responsive.css is WHAT GIVES WAY WHEN SPACE RUNS OUT — container
   queries against `main`, so a panel is measured against the room it
   has rather than against the size of the screen.

   tablet.css is WHAT CHANGES WHEN A FINGER IS DOING THE POINTING —
   @media (pointer: coarse), which is a fact about the device and not
   about its width. It comes after because a 44px touch target must win
   over the size a rule chose for a mouse.

   Keeping those two apart is deliberate. Mixing them is how the desk
   ended up deciding button sizes from screen widths and layout from
   guesses about which device had which width. */
@import url("./css/components/responsive.css");
@import url("./css/components/tablet.css");

/* handset.css is WHAT CHANGES WHEN THE NAVIGATION ITSELF NO LONGER
   FITS — the one layout question the container queries above cannot be
   asked, because the sidebar is deciding how much room to LEAVE and so
   has nothing to measure but the screen. Same exception, and the same
   reasoning, as the rail in layout/sidebar.css.

   It is scoped to a width strictly below the lowest container query in
   responsive.css: 480px of `main` plus the 56px rail that has to be
   paid for before `main` sees any of it. So it cannot reach a layout
   any rule above it has an opinion about — the arithmetic is asserted
   in checks/check-desk-phone.mjs rather than left as a claim.

   AFTER tablet.css, because a phone is a coarse pointer and everything
   in that file is still true here. This narrows what that file sized;
   it does not replace it. */
@import url("./css/components/handset.css");

/* ---- the embed ------------------------------------------------------
   ADDED FOR THE PORTFOLIO. Not part of desk_app.

   The desk is shown inside an iframe on a page that has its own scroll,
   and a second scrollbar drawn down the inside of the panel reads as a
   frame around a frame rather than as a screen. The content still
   scrolls — wheel, trackpad, touch, keyboard and the scrollbar's own
   arrows all behave exactly as before; only the drawn bar is gone.

   Last in the manifest because it is the only rule here that is about
   the page the desk is sitting on rather than about the desk. Anything
   that follows it would be overriding an embed decision with a product
   one, which is the wrong way round.

   Kept in the manifest rather than a stylesheet of its own: thirteen
   pages link this file and nothing else, so a second file would mean
   thirteen edits and a way to forget one. */
@import url("./css/embed.css");