/* Xandriq - utilities.css
 * sr-only, drop-cap helper, pull-quote, print, tabular-nums.
 */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:focus-visible,
.sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s-16);
  background: var(--c-accent);
  color: var(--c-bg);
  padding: var(--s-8) var(--s-16);
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  z-index: 9999;
  transition: top var(--dur) var(--ease);
}

.skip-link:focus {
  top: var(--s-16);
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

.no-wrap {
  white-space: nowrap;
}

.hidden,
[hidden] {
  display: none !important;
}

.visually-hidden {
  visibility: hidden;
}

/* Editorial mono text (telemetry) */
.mono {
  font-family: var(--f-mono);
  letter-spacing: 0.04em;
}

.mono--sm {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

/* Container of centered content (legal, thank-you) */
.narrow {
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
}

.wider {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Print optimization */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }
  .site-header,
  .site-footer,
  .mobile-nav,
  .nav-toggle,
  .xq-cookie-fallback,
  .btn-primary,
  .btn-secondary,
  #CybotCookiebotDialog {
    display: none !important;
  }
  a {
    color: #000 !important;
    text-decoration: underline;
  }
  h1, h2, h3, h4, h5 {
    color: #000 !important;
    page-break-after: avoid;
  }
  .row-card,
  .telemetry-grid {
    page-break-inside: avoid;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}