/* ============================================================
   base.css: element defaults and utilities for the swiss pages

   The swiss design was built on this base, not on the old
   @hobbs-og/design-system stack (system.css + main.css). Loading
   the old stack underneath leaks its paddings, borders and type
   into swiss components, so swiss pages load only:

     vendor/software/fonts.css, tokens.css, grid.css
     src/styles/base.css          this file
     src/styles/themes/swiss.css  the design

   Values are tokens, except the 1px clip pattern in
   .visually-hidden, which is the standard technique.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

.text-nowrap {
  white-space: nowrap;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--spacing-16);
  inset-block-start: var(--spacing-16);
  z-index: 100;
  translate: 0 -200%;
}

.skip-link:focus {
  translate: 0 0;
}

.icon {
  inline-size: 1em;
  aspect-ratio: 1;
  fill: currentColor;
  flex: none;
}

dialog:not([open]) {
  display: none;
}

.align {
  display: grid;
  grid-template-columns: subgrid;
  gap: inherit;
}

.stack--tight > * + * {
  margin-block-start: var(--spacing-8);
}

@media (max-width: 59.9375em) {
  :is(.grid, .align) > :is(span, div):empty {
    display: none;
  }
}

[hidden] {
  display: none !important;
}

/* Abbreviations keep their own case inside uppercase labels, so "SaaS"
   doesn't render as "SAAS". */
abbr {
  text-transform: none;
}