/* Single-purpose classes every layout shares, on the scale in tokens.css. After
   Campfire's utilities.css. Reach for a component or feature class first; these are for
   the one-off nudge, so like the inline styles they replaced they win over any
   component rule (!important). */

/* Read by screen readers, not shown. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The first tab stop on every page jumps past the navigation, after Campfire's .skip-navigation. */
.skip-link { position: absolute; top: 8px; left: 8px; z-index: 100; padding: 8px 14px; border-radius: 6px; background: #fff; color: #161717; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.25); transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* Text */
.txt-left { text-align: left !important; }
.txt-right { text-align: right !important; }
.txt-center { text-align: center !important; }
.txt-nowrap { white-space: nowrap !important; }
.txt-break { overflow-wrap: anywhere !important; }
.txt-flag { color: var(--flag-ink) !important; }
.txt-strike { text-decoration: line-through !important; }

/* Flexbox */
.justify-start { justify-content: flex-start !important; }
.justify-between { justify-content: space-between !important; }
.align-center { align-items: center !important; }
.flex-wrap { flex-wrap: wrap !important; }
.gap-s { gap: var(--space-s) !important; }
.inline { display: inline !important; }

/* Sizing */
.full-width { width: 100% !important; }
.max-width-s { max-width: 480px !important; }
.max-width-m { max-width: 640px !important; }
.max-width-l { max-width: 760px !important; }
.overflow-x { overflow-x: auto !important; }

/* Margins */
.margin-none { margin: 0 !important; }
.margin-top-none { margin-top: 0 !important; }
.margin-top-2xs { margin-top: var(--space-2xs) !important; }
.margin-top-xs { margin-top: var(--space-xs) !important; }
.margin-top-s { margin-top: var(--space-s) !important; }
.margin-top-m { margin-top: var(--space-m) !important; }
.margin-top-l { margin-top: var(--space-l) !important; }
.margin-top-xl { margin-top: var(--space-xl) !important; }
.margin-block-xs { margin-block: var(--space-xs) !important; }
.margin-bottom-m { margin-bottom: var(--space-m) !important; }
.margin-bottom-xl { margin-bottom: var(--space-xl) !important; }

/* Lists and rows */
.indent { padding-left: 18px !important; }
.divided { padding-block: var(--space-s) !important; border-bottom: 1px solid var(--line) !important; }

/* A rule above, to set off the end of a card. */
.ruled { margin-top: var(--space-l) !important; padding-top: var(--space-l) !important; border-top: 1px solid var(--line) !important; }