/* SUPASMART estate layouts — the served layout sheet.
 *
 * Founder, 2026-08-20, ruling 4, verbatim:
 *
 *   "While you're at it, try to make the spacing and the layouts consistent
 *   and reusable, and also improve everything using front-end design skills
 *   or other good trending skills for front-end."
 *
 *   "Select what looks best and try to replicate it and improve it across.
 *   For example, the 'draft a month' in social media manager is very poor,
 *   but it is slightly better in the SupaSales 'create an agent'."
 *
 * tokens.css is the "consistent" half — the values. This sheet is the
 * "reusable" half — the seven shapes those values keep being spent on. The
 * shapes are lifted off the benchmark that ruling names, SupaSales' agents
 * home (`apps/supasales/ui/app.css`), and rounded onto the scale.
 *
 * It is OPT-IN and CLASS-ONLY. There is no element selector and no `:root`
 * here, so the sheet styles NOTHING until a page writes one of these class
 * names: adding the link moves no pixel on any surface, and a page may adopt
 * `.card-grid` alone and keep its own everything else. Consume it AFTER
 * tokens.css and BEFORE the app's own styles, so the app still wins:
 *
 *   <link rel="stylesheet" href="/shell/tokens.css?v=20260820-rhythm">
 *   <link rel="stylesheet" href="/shell/layout.css?v=20260820-rhythm">
 *
 * Every length is a token and every colour a var(), so gate.sh's
 * check_palette_law holds here exactly as it does everywhere else. LAYOUT
 * SHELLS ONLY: buttons, inputs, chips, tables and every other component stay
 * app-owned — the shell reaching further below the bar is what pass 141
 * forbids.
 */

/* ── the page column ────────────────────────────────────────────────────────
   One centred column, three widths. The variants are single-class specificity
   and win on source order alone, so `class="page page--wide"` needs no
   `!important` and no compound selector. `min(…, 100%)` never overflows a
   narrow viewport, and border-box keeps the gutter INSIDE that width instead
   of adding 48px to it. */
.page {
  box-sizing: border-box;
  width: min(var(--col-app), 100%);
  margin-inline: auto;
  padding: var(--page-pad);
}
.page--read { width: min(var(--col-read), 100%); }
.page--wide { width: min(var(--col-wide), 100%); }

/* The benchmark drops its gutter to 14px on a phone rather than keeping 24px
   and losing the same width off the content. */
@media (max-width: 640px) {
  .page { padding-inline: var(--s6); }
}

/* ── vertical rhythm ────────────────────────────────────────────────────────
   The blocks-down-a-page gap, as a gap rather than as margins on the blocks:
   nothing collapses, nothing needs a `:first-child` reset, and a block moved
   or hidden takes its spacing with it. `minmax(0, 1fr)` is the fix for the
   oldest grid bug there is — a long unbroken string in a child stretching the
   column past its container. `.page.stack` composes: the column from one, the
   rhythm from the other. */
.stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--stack);
}
.stack--tight { gap: var(--stack-tight); }

/* ── a wrapping row ─────────────────────────────────────────────────────────
   Buttons beside buttons, chips beside chips. It wraps by default because a
   row of actions that cannot wrap is a row that overflows on a phone. */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
}

/* ── the paper card ─────────────────────────────────────────────────────────
   BRAND's quiet paper surface: white, one hairline, the card radius. No
   shadow at rest and no hover state — a card is not a control, and the
   surfaces that ARE controls own their own lift. */
.card {
  box-sizing: border-box;
  min-width: 0;
  padding: var(--card-pad);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  background: var(--paper);
}

/* ── the card grid ──────────────────────────────────────────────────────────
   `auto-fill` rather than a fixed column count, so the same grid is 3-up on
   the workspace column and 1-up on a phone with no media query. `min(…, 100%)`
   inside the minmax is what stops the track from being wider than the grid
   when the viewport is narrower than one card. `--card-min` is the one knob a
   consumer turns; the list resets are there because the benchmark's grid is a
   `<ul role="list">`, and a layout shell should not need the app to undo the
   browser first. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--card-min, 280px), 100%), 1fr));
  gap: var(--stack);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ── the title row ──────────────────────────────────────────────────────────
   The benchmark's shape: "Your agents." on the left, its actions on the right,
   baselines aligned at the bottom so a two-line title still sits level with
   the buttons. When it wraps on a phone the actions fall under the title with
   a 12px lead rather than the 24px that separates them side by side. */
.page-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s5) var(--s10);
}