/* ═══════════════════════════════════════════════════════════
   Layout — page gutter + mobile edge-to-edge

   The canonical answer to "how far should content sit from the screen
   edge, and how do lists/tables go full-bleed on a phone." Framework-
   agnostic; pairs with the --tn-page-pad-x token (24px desktop → 16px
   phone). 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);
}

/* ── 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;
    }
}