/* VirtuSlo design kit — base. Hand-written; the same rules as the public site's
   base layer, at the admin's dense size. Import after fonts.css and tokens.css (and after
   tailwindcss, when there is Tailwind: its layer order comes first). */

@layer base, components;

@layer base {
  html {
    background: var(--vs-bg);
  }

  body {
    margin: 0;
    background: var(--vs-bg);
    color: var(--vs-ink);
    font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
    font-size: 0.8125rem;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
  }

  /* Whatever acts on a click points, except when it can't. */
  button:not(:disabled, [aria-disabled='true']),
  [role='button']:not([aria-disabled='true']),
  summary {
    cursor: pointer;
  }

  /* The focus ring: 2px, 2px off — in a pen's colour inside a pen (--pen), else green ink.
     Never removed; drawn inset where a scroll box or a menu would clip it (components.css). */
  :focus-visible {
    outline: 2px solid var(--pen, var(--vs-brand-ink));
    outline-offset: 2px;
  }

  /* Where focus lands on a page change — a heading or <main>, which cannot be operated. */
  [data-landing]:focus {
    outline: none;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@layer components {
  /* Every number: points, counts, times, vELO. Without it a column's digits don't line up. */
  .tn {
    font-variant-numeric: tabular-nums;
  }

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