/* Writing Assistant · utilities. The ONLY layer allowed to use !important (docs/09-VISUAL-SPEC.md §3). */
@layer utilities {
  [hidden] { display: none !important; }
  .wa-vh {
    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
  }
  .wa-skip {
    position: absolute; left: var(--sp-4); top: var(--sp-2); z-index: var(--z-toast);
    padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md);
    background: var(--accent); color: var(--on-accent);
    font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font-ui);
    transform: translateY(-300%);
  }
  .wa-skip:focus-visible { transform: none; outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }   /* the product ring, not the browser's (critic r4 polish 4) */
  /* Responsive visibility (breakpoints: lg < 1280, md < 1024, sm < 768) */
  @media (max-width: 1279.98px) { .wa-hide-lg { display: none !important; } }
  @media (min-width: 1280px) { .wa-only-lg { display: none !important; } }
  @media (max-width: 1023.98px) { .wa-hide-md { display: none !important; } }
  @media (max-width: 767.98px) { .wa-hide-sm { display: none !important; } }
  @media (min-width: 768px) { .wa-only-sm { display: none !important; } }
  @media (min-width: 1024px) { .wa-only-md { display: none !important; } }
  /* Boot: no transitions until the first frame is painted (the drawer must not animate closed on load, critic r1 m16).
     The app removes .wa-preload from <html> after two animation frames. */
  .wa-preload *, .wa-preload *::before, .wa-preload *::after { transition: none !important; }
  /* Keyboard hints are noise on touch-only devices */
  @media (hover: none) and (pointer: coarse) { .wa-keyhint, [data-hide-coarse] { display: none !important; } }
  .u-grow { flex: 1 1 auto; min-width: 0; }
  .u-muted { color: var(--text-3); }
  .u-accent { color: var(--accent); }
  .u-nowrap { white-space: nowrap; }
  .u-mt-0 { margin-top: 0 !important; }
}