/* Mango shared page shell — how wide a page is, on every Mango intra-tool.
   ---------------------------------------------------------------------------
   Served by the Dashboard at /css/mango-page.css. Tools link to it by that
   absolute path, the same way they link the header and the pagination bar:
   behind the shared reverse proxy every tool is on the same origin as the
   Dashboard, so one definition sets the page width platform-wide and a change
   here reaches every tool at once.

   WHY THIS IS SHARED RATHER THAN A NUMBER EACH TOOL PICKS
     A person moving between tools should not see the content jump narrower or
     wider. And these screens are tables: a fixed narrow column wastes half a
     monitor and squeezes columns that have something to say. So the shell is
     fluid — it fills the window minus a gutter, up to a maximum that stops
     lines becoming unreadable on a very wide display.

   USAGE
     <link rel="stylesheet" href="/css/mango-page.css">
     <main class="mango-page"> … </main>              <!-- ordinary page -->
     <main class="mango-page mango-page-wide"> … </main>   <!-- table-heavy page -->

   Or consume the custom properties directly, which is what the Dashboard's own
   styles.css does:
     main{max-width:var(--mango-page-max); padding:0 var(--mango-page-gutter);}

   The tokens are the contract. Read them; don't hard-code 1600px in a tool.
   Spec: docs/CONNECTING_A_TOOL.md → Part 2, The page shell.
   --------------------------------------------------------------------------- */

:root{
  /* The platform width. On a 1920-wide window this fills all but about 160px a
     side, which is the proportion the reference screens use, and on anything
     narrower it simply fills the window. */
  --mango-page-max: 1600px;
  /* A table-heavy page — the audit log, a transactions list. Wider, but still
     capped: past this the eye loses the row it is reading on the way across,
     and it stays close enough to the standard width that moving between pages
     does not look like moving between products. */
  --mango-page-max-wide: 1900px;
  /* The breathing room at each edge. Deliberately small: the point is to use
     the window, not to frame it. */
  --mango-page-gutter: 24px;
}

.mango-page{
  width: 100%;
  max-width: var(--mango-page-max);
  margin: 0 auto;
  padding: 0 var(--mango-page-gutter);
  box-sizing: border-box;
}
.mango-page-wide{ max-width: var(--mango-page-max-wide); }
/* For the rare screen that genuinely wants every pixel (a wide grid the user
   scrolls horizontally). Use it sparingly — an uncapped line of text is hard
   to read. */
.mango-page-full{ max-width: none; }

/* A table wider than the window scrolls ITSELF; the page body never scrolls
   sideways. Shared here because every Mango screen is a table screen, and a
   table with no scroll container simply hides its last columns on a phone —
   the row actions are usually the ones that fall off the edge. */
.mango-table-scroll{ overflow-x: auto; }

/* On a phone or a narrow split window the gutter is the only thing between the
   content and the edge, so it shrinks rather than disappearing. */
@media (max-width: 640px){
  :root{ --mango-page-gutter: 14px; }
}