/* Round 1: how wide each kind of page is, and the gutter it keeps.

   The site already has a width system: --page, set per body class, with main
   centred inside it. The first pass threw it away and set main to full width
   everywhere, which is why the marketing pages ended up with their text against
   the glass. This sets the token instead of fighting it (owner, 2026-09-23). */

:root { --page: 64rem; }

/* Reading and marketing: a column, centred, with a gutter at every width. */
main { padding-inline: clamp(1rem, 4vw, 2rem); }

/* Reference pages carry tables and long code lines, so they get more room. */
body.wide-page { --page: 76rem; }

/* Rule 5: the working screens take the window. */
body.app-page,
body.admin-page { --page: none; }
body:has(.console-shell) { --page: none; }

@media (min-width: 900px) {
  /* The sidebar grid needs the gutter on the content side only, or the sidebar
     floats off the edge of the window. */
  body:has(.console-shell) main { padding-inline: 0; }
  body:has(.console-shell) main > *:not(.console-shell) { padding-inline: clamp(.75rem, 2vw, 1.5rem); }
  body.admin-page main { padding-inline: 0; }
  .admin-body { padding-inline: clamp(.75rem, 2vw, 1.5rem); }
}

/* An account screen is a working screen, but it is read as well as worked, so
   its panels stop before the line gets unreadable on a wide monitor. */
body.app-page main { max-width: 84rem; margin-inline: auto; }