/* styles/utilities.css
 * Single-purpose classes. This is the last cascade layer, so they win without specificity
 * tricks. Global interaction rules (focus ring, selection, reduced motion) live here too.
 * This is the only file where !important is allowed. */
@layer utilities {
  [hidden] {
    display: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

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

  /* 2px ring, 2px offset: the site's one settled value (BRI-7803; the boards' written rule
     says offset 3). A control whose ring would be clipped draws it inside instead by setting
     --focus-offset (accordion rows, scroll regions). This layer wins over component layers,
     so a component outline-offset on the focused element would be dead. */
  :focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: var(--focus-offset, 2px);
  }

  /* Keyboard only: pointer focus draws nothing */
  :focus:not(:focus-visible) {
    outline: none;
  }

  ::selection {
    background: var(--selection-bg);
    color: var(--selection-fg);
  }

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

  /* The site's one skip-link style: .skip-link on pages that ship their own, .site-skip-link
     from the chrome (components/header.html). Off-screen until focused, then pinned top-left
     8px below the rendered header, whose height is --chrome-nav-h (64px on M, 72px from D, its
     1px rule included), with room for the whole ring, clear of the logo. */
  :is(.skip-link, .site-skip-link) {
    --skip-top: calc(var(--chrome-nav-h, 64px) + var(--space-8));

    position: fixed;
    top: var(--skip-top);
    left: var(--space-8);
    z-index: 1000;
    padding: 10px 14px;
    background: var(--fern);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    transform: translateY(calc(-100% - var(--skip-top) - var(--space-8)));
  }

  /* 38px visual, 44px hit area */
  :is(.skip-link, .site-skip-link)::before {
    content: "";
    position: absolute;
    inset: -3px 0;
  }

  /* One style on every surface: paper fill, ink label, and a two-tone ring 3px out with the
     board's 3/3/7/7 corners: a 2px fern ring with a 2px paper ring outside it. Over paper the
     fern ring reads (12.3:1); over fern the paper ring does (12.3:1). Pages that still load the
     unlayered css/ (home and other legacy pages) style .skip-link and a:focus-visible there, and
     unlayered rules beat every layer, so the focused declarations are !important. */
  :is(.skip-link, .site-skip-link):focus {
    position: fixed !important;
    top: var(--skip-top) !important;
    left: var(--space-8) !important;
    z-index: 1000 !important;
    padding: 10px 14px !important;
    background: var(--paper) !important;
    color: var(--ink) !important;
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none;
  }

  :is(.skip-link, .site-skip-link):focus::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 2px solid var(--fern);
    border-radius: 3px 3px 7px 7px;
    box-shadow: 0 0 0 2px var(--paper);
    pointer-events: none;
  }

  /* Artifact responsive behavior (vUAHR g4tML). A shell sets --artifact-w to its D width.
     native (default): keeps that width on W. fluid: fills its grid track on W.
     m-reflow (default): the artifact re-lays out at 342. m-scale: media keep their ratio.
     m-excerpt: on M the window drops away; the content sits under a 1.5px ink rule. */
  .artifact--native,
  .artifact--fluid {
    inline-size: min(100%, var(--artifact-w));
  }

  @media (min-width: 1680px) {
    .artifact--fluid {
      inline-size: 100%;
    }
  }

  @media (max-width: 899px) {
    .artifact--m-scale :is(img, video) {
      inline-size: 100%;
      block-size: auto;
    }

    /* The 1.5px rule is a background band: border widths snap to whole pixels */
    .artifact--m-excerpt {
      padding: var(--space-24) 0 0;
      border: 0;
      border-radius: 0;
      background: linear-gradient(var(--ink), var(--ink)) 0 0 / 100% 1.5px no-repeat;
      box-shadow: none;
    }

    .artifact--m-excerpt > .artifact-bar {
      display: none;
    }
  }

  @media (forced-colors: active) {
    :focus-visible {
      outline-color: Highlight;
    }

    /* Current page keeps an underline when bars and shadows drop out. !important so it also
       wins over the unlayered css/ that legacy pages still load. */
    [aria-current]:not([aria-current="false"]) {
      text-decoration-line: underline !important;
      text-decoration-thickness: 2px !important;
      text-underline-offset: 4px !important;
    }

    :is(.skip-link, .site-skip-link):focus::after {
      border-color: Highlight;
    }
  }

  .nowrap { white-space: nowrap; }
  .text-center { text-align: center; }
  .text-start { text-align: start; }
  .text-muted { color: var(--ink-muted); }
  .mx-auto { margin-inline: auto; }
  .m-0 { margin: 0; }
}