/* ═══════════════════════════════════════════════════════════
   Layout — page gutter, page measure, mobile edge-to-edge

   The canonical answer to "how far should content sit from the screen
   edge, how wide should a page get before it's capped, and how do
   lists/tables go full-bleed on a phone." Framework-agnostic; pairs with
   the --tn-page-pad-x / --tn-page-measure tokens (gutter: 24px desktop →
   16px phone; measure: 1120px). Bootstrap apps can get the same gutter
   with `px-4`/`px-3 px-md-4` instead of .tn-page — the bleed modifier
   still applies.
   ═══════════════════════════════════════════════════════════ */

/* Page content container — the single horizontal gutter for a screen.
   Wrap your page body in this (or use an equivalent responsive padding). */
.tn-page {
    padding-left: var(--tn-page-pad-x);
    padding-right: var(--tn-page-pad-x);
}

/* Page measure — add alongside .tn-page to also cap the body's width and
   centre it, instead of letting it stretch to whatever the viewport is
   (a 2560px monitor otherwise renders whichever width each page's content
   happens to imply, page by page). .tn-page alone still works standalone
   for anyone who wants the gutter without a cap — this only adds the cap.
   Same value as .tn-split--full's inner cap (--tn-page-measure); that
   component composes the token directly since it already owns its own
   centring, this class is for everything else. */
.tn-page--measure {
    max-width: var(--tn-page-measure);
    margin-left: auto;
    margin-right: auto;
}

/* ── Edge-to-edge on mobile ──
   Put on a .tn-card / .tn-section / .tn-table-wrapper / .tn-list that
   should run to the screen edges on a phone — the "Fortnox-class" list
   look. It cancels exactly one page gutter and drops the side frame, so
   rows use their full width instead of sitting in a doubly-padded island.
   Above the breakpoint it's inert (cards stay inset). */
@media (max-width: 640px) {
    .tn-bleed-mobile {
        margin-left: calc(-1 * var(--tn-page-pad-x));
        margin-right: calc(-1 * var(--tn-page-pad-x));
        border-left: none;
        border-right: none;
        border-radius: 0;
    }
}