/*
 * PageShell.css — THE PAGE AREA OF EVERY YABEE APP: SIZES, TYPE SCALE, CONTAINER
 *
 * LIVE COPY. yabeeauth serves this file to every app:
 *
 *   <link rel="stylesheet" href="https://auth.yabeecreative.com/shell/page-shell.css?app=<app id>" />
 *
 * (after the sidebar sheet, before the app's own CSS). One edit + one yabeeauth
 * deploy resizes all apps; no app is rebuilt.
 *   master:      gitbackup/.garage/ui-components/PageShell.css   (this file)
 *   served copy: yabeeauth/ui/public/shell/page-shell.css        (keep identical)
 *
 * What an app does:
 *   1. Outer <Layout className="app-frame">, inner <Layout className="app-frame-main">
 *      (the viewport lock: the page scrolls, the sidebar never leaves the screen).
 *   2. ONE wrapper around the routed page: <div className="app-page app-page--narrow">.
 *      The shell picks the width from the route; a page never sets its own
 *      max-width or outer padding.
 *
 *      WHICH WIDTH — ask in this order, the first yes decides:
 *        1. Is the page a work area: a data table that IS the page, a work list
 *           the user goes through, an explorer, split panes, plots beside
 *           tables?                                        → app-page--wide
 *        2. Is it one column of fields or text: a form, a settings page, a
 *           reading page?                                  → app-page--narrow
 *        3. Anything else — cards, dashboards, wizards, forms with several
 *           columns, a small table inside a card           → app-page
 *      Every route is listed in the shell's width map, the default ones too, so
 *      a new page is classified on purpose and never by falling through.
 *
 *      The page's title row is app-page-title (title → badge → (?)); with a
 *      description under the title and actions on the right, add
 *      app-page-title--split. A page whose title is its card's header has no
 *      title row.
 *   3. Sizes in the app's own CSS use the variables below, never a px font size.
 *   4. AntD follows the same three device sets through deviceTheme.ts.
 *
 * THE SIZING RULE (garage standard): rem for type and spacing, clamp() for
 * values that grow with the window, % / flex / grid for widths, dvh for the
 * viewport lock only. px stays for borders, radii, icons and fixed widgets.
 *
 * Variables sit under :where(:root) (zero specificity), so an app can override
 * one in its own :root without !important.
 */

:where(:root) {
  /* Content widths (the text column, not counting the gutter). */
  --page-narrow: 53.75rem; /* 860px */
  --page-default: 65rem; /* 1040px */

  /* Fluid spacing: grows with the window, no breakpoint. */
  --page-gutter: clamp(0.75rem, 2.5vw, 1.5rem);
  --card-pad: clamp(1rem, 3vw, 2.25rem);
  --page-gap: 1rem;

  /* Type scale — browser (992px and wider). */
  --font-caption: 0.75rem;
  --font-small: 0.8125rem;
  --font-body: 0.875rem;
  --font-reading: 0.9375rem;
  --font-section: 1.25rem;
  --font-title: 1.5rem;
}

/* Tablet: 768px – 991.98px. */
@media (max-width: 991.98px) {
  :where(:root) {
    --font-caption: 0.8125rem;
    --font-small: 0.875rem;
    --font-body: 0.9375rem;
    --font-reading: 1rem;
    --font-section: 1.25rem;
    --font-title: 1.375rem;
  }
}

/* Phone: below 768px. Body text is 1rem: a smaller input makes iOS zoom the page. */
@media (max-width: 767.98px) {
  :where(:root) {
    --font-caption: 0.8125rem;
    --font-small: 0.875rem;
    --font-body: 1rem;
    --font-reading: 1rem;
    --font-section: 1.125rem;
    --font-title: 1.25rem;
  }
}

/* ── Viewport lock ─────────────────────────────────────────────────────────
   dvh follows the phone's address bar; vh is the fallback for older browsers. */
.app-frame {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.app-frame-main {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
}

/* ── Page container ──────────────────────────────────────────────────────── */
.app-page {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: calc(var(--page-default) + 2 * var(--page-gutter));
  margin-inline: auto;
  padding: var(--page-gutter);
  padding-block-end: calc(2 * var(--page-gutter));
  font-size: var(--font-body);
}
.app-page--narrow {
  max-width: calc(var(--page-narrow) + 2 * var(--page-gutter));
}
.app-page--wide {
  max-width: none;
}

/* Title row of a page: Title → badge → (?). */
.app-page-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--page-gap);
}
/* Title block on the left (title + description), actions on the right. */
.app-page-title--split {
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
@media (max-width: 767.98px) {
  .app-page-title--split {
    flex-direction: column;
    align-items: stretch;
  }
}