/* Reach and legibility, in one place: tap targets, the skip link, forced colors. Loaded after the page styles (files load in name
   order) so it only adds to them; it changes how big a thing is to hit, never how it looks. */

/* the skip link: off screen until the keyboard lands on it */
.skip { position: fixed; z-index: 30; left: 12px; top: -80px; padding: 11px 16px; background: var(--blue); color: var(--onblue); font: 700 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.skip:focus { top: 8px; color: var(--onblue); background: var(--blue); outline: 3px solid var(--hi); outline-offset: 2px; }

/* tap targets of 44px: an invisible pad around small controls (the control itself keeps its look and its place in the layout) */
.site-links a, .cs-mark, .link-more, a.ev, a.eyebrow, .tl .it .sub .wordsbtn, .tabs a, .pills a, a.wip, .bar-back, .find-row button, .area-list a, .rb-reset { position: relative; }
.site-links a::before, .cs-mark::after, .link-more::after, a.ev::before, a.eyebrow::after, .tl .it .sub .wordsbtn::after, .tabs a::after, .pills a::after, a.wip::after, .bar-back::after, .find-row button::after, .area-list a::after, .rb-reset::after { content: ""; position: absolute; inset: -11px -6px; }
.site-links a::before { inset: -14px -8px; }
.cs-mark::after { inset: -12px -6px; }
.tl .it .sub .wordsbtn::after { inset: -13px; }
.tabs a::after { inset: -3px -4px; }
.find-row button::after { inset: -4px; }
.area-list a::after { inset: -10px -5px; }
.bar-back { min-height: 44px; display: inline-flex; align-items: center; }
/* the ruler's handles: 44px wide, reaching outward from each edge of the window */
.rb-h::before { content: ""; position: absolute; top: 0; bottom: 0; width: 44px; }
.rb-h-l::before { left: -26px; }
.rb-h-r::before { left: 0; }

/* high-contrast and forced-colors modes replace the page's colors: what marks "you are here" and the ruler's window must not be color alone */
@media (forced-colors: active) {
  .tabs a { text-decoration: none; border-bottom-color: transparent; }
  .tabs a[aria-current] { outline: 2px solid CanvasText; outline-offset: 4px; border-bottom-color: CanvasText; }
  .tabs a[aria-current], .site-links a[aria-current] b, .pills a[aria-pressed=true], .money-filter .mf[aria-pressed=true] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
  .rb-win { outline: 2px solid CanvasText; background: Highlight; opacity: .6; }
  .rb-h::after { background: CanvasText; border-color: Canvas; }
  .box, .card-in, .find-row, .money-filter .mf, a.invite { border: 1px solid CanvasText; }
  a.banner { border: 2px solid LinkText; }
  .area-label { fill: CanvasText; }
}