/* AnotherAgent — shared interaction baseline, linked by every inline-styled
   page after aa-footer.css. It carries the parts of the Web Interface
   Guidelines that are the same everywhere: a visible keyboard focus ring,
   reduced motion, touch behaviour, anchor offsets under the fixed nav,
   heading wrapping and the skip link. */

:root{
  color-scheme:light;
}

/* The header is sticky (72px), so anchor jumps and focus scrolling land clear of it. */
html{
  scroll-padding-top:88px;
}

[id]{
  scroll-margin-top:88px;
}

/* One visible focus ring for everything that takes focus. Buttons and links
   only match :focus-visible from the keyboard, so mouse users never see it.
   Cobalt is the system's focus colour; ember is reserved for the one signal
   per view. */
:focus-visible{
  outline:2px solid #2F5BD0;
  outline-offset:4px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline-offset:2px;
}

/* Touch: no double-tap zoom delay and no grey tap flash on controls. */
a,
button,
input,
label,
select,
textarea,
summary,
[role="button"],
[role="tab"]{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* Native selects keep the site's colours under Windows dark mode. */
select{
  color:#121210;
  background-color:#FDFCF9;
}

/* Headings balance their last line; numbers that sit in columns line up. */
h1,
h2,
h3{
  text-wrap:balance;
}

time,
[data-n],
.aa-count,
.aa-stat .n{
  font-variant-numeric:tabular-nums;
}

/* Skip link: the first focusable thing on every page. */
.aa-skip{
  position:fixed;
  top:12px;
  left:12px;
  z-index:1000;
  padding:12px 16px;
  color:#F6F3EC;
  background:#121210;
  border:1px solid #121210;
  font:500 11px/1 'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
  text-decoration:none;
  transform:translateY(-160%);
  transition:transform .2s ease;
}

.aa-skip:focus{
  transform:translateY(0);
}

/* Reduced motion: every transition and animation completes at once, and
   in-page scrolling jumps. aa-experience.js already skips the particle
   field, and aa-page.js reveals every section without waiting. */
@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}