/* "Skip to content" (_Layout, the first thing on every page; site-chrome.js moves focus). Off screen until a keyboard
   user tabs to it, then shown top-left above the header. */
.skip-link {
  position: absolute; left: 12px; top: -200px; z-index: 10000;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  background: #111; color: #fff; border-radius: 8px;
  font: 700 15px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; text-decoration: none;
}
.skip-link:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px #111; }
/* The area focus lands on isn't a control: no outline around the whole page */
main[tabindex="-1"]:focus, h1[tabindex="-1"]:focus { outline: none; }