/* ==========================================================================
   SelectACard - brand stylesheet
   Palette and type are taken from logos/README.txt so the site and the
   logo pack stay in step. Do not introduce colors outside these tokens.
   ========================================================================== */

:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);

  /* Brand - light */
  --ink:        #12141A;  /* lettering, keylines, spades */
  --ivory:      #F7F3E8;  /* card faces, tiles */
  --bone:       #F2EFE6;  /* page background */
  --crimson:    #C0272D;  /* the A, pips, hearts/diamonds */
  --brass:      #8A6B22;  /* accents */

  /* Roles */
  --bg:         var(--bone);
  --surface:    var(--ivory);
  --surface-2:  #FFFFFF;
  --text:       var(--ink);
  --muted:      #585B63;
  --accent:     var(--crimson);
  --line:       rgba(18, 20, 26, 0.14);
  --line-firm:  rgba(18, 20, 26, 0.28);
  --shadow:     0 1px 2px rgba(18, 20, 26, 0.05), 0 8px 24px -12px rgba(18, 20, 26, 0.18);

  /* Vertical accents - one per router tile (strategy.md section 4) */
  --v-playing:  var(--crimson);
  --v-business: #2F5D8C;
  --v-greeting: #B4722A;
  --v-credit:   #2E6B63;

  --radius:     14px;
  --radius-lg:  20px;
  --maxw:       1080px;
  --measure:    68ch;
}

/* Dark mode mirrors the `auto` logo files: crimson is too dark on near-black
   (drops to about 2:1), so it lifts to #E2555A. See logos/README.txt. */
:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --bg:        #14161B;
    --surface:   #1C1F26;
    --surface-2: #22262F;
    --text:      var(--ivory);
    --muted:     #A9AEB8;
    /* WCAG 2.1 AA (1.4.3) needs 4.5:1. The logo pack's #E2555A clears that on
       the logo's own dark tile (4.98:1) but only reaches 4.46:1 as text on a
       card surface, which is where the site uses it. Lifted just enough to
       clear 4.5 on every dark surface: bg 5.83, surface 5.32, surface-2 4.88.
       The logo files keep #E2555A - correct for their own background. */
    --accent:    #E86B70;
    --line:      rgba(247, 243, 232, 0.16);
    --line-firm: rgba(247, 243, 232, 0.30);
    --shadow:    0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
    --brass:     #C9A44C;
    --v-business: #6FA3D8;
    --v-greeting: #E0A356;
    --v-credit:   #5FA69B;
  }
}
:root[data-theme="dark"] {
  --bg: #14161B; --surface: #1C1F26; --surface-2: #22262F;
  --text: var(--ivory); --muted: #A9AEB8; --accent: #E86B70;
  --line: rgba(247, 243, 232, 0.16); --line-firm: rgba(247, 243, 232, 0.30);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  --brass: #C9A44C;
  --v-business: #6FA3D8; --v-greeting: #E0A356; --v-credit: #5FA69B;
}

*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
[hidden] { display: none !important; }

a { color: inherit; text-decoration-color: var(--line-firm); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(30px, 5.2vw, 50px); }
h2 { font-size: clamp(22px, 3.2vw, 30px); margin-top: 1.6em; }
h3 { font-size: clamp(18px, 2.2vw, 21px); margin-top: 1.4em; }
p  { margin: 0 0 1.1em; }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.prose { max-width: var(--measure); min-width: 0; }
.prose li { margin-bottom: .45em; }
.section { padding: clamp(40px, 7vw, 76px) 0; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-header .bar {
  display: flex; align-items: center; gap: 22px;
  min-height: 66px; flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.brand img { height: 30px; width: auto; display: block; }
.nav { display: flex; gap: 20px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.nav a { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--muted); white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }

/* ---------- card surfaces ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.card--flat { box-shadow: none; }

/* Router tiles: playing-card proportions, suit rail across the top */
.tile {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1.5px solid var(--line-firm);
  border-radius: var(--radius-lg);
  padding: 26px 22px 22px;
  text-decoration: none;
  position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: var(--shadow);
}
.tile::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: var(--tile-accent, var(--accent));
}
.tile:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(18,20,26,.06), 0 18px 34px -16px rgba(18,20,26,.34); }
.tile[aria-disabled="true"] { opacity: .78; pointer-events: none; }
.tile .suit { font-size: 26px; line-height: 1; margin-bottom: 12px; }

/* Suits keep their real colors - a blue club or a red spade reads as a mistake
   to anyone who plays cards. The per-vertical accent lives in the top rail and
   the call to action instead. */
.suit--black { color: var(--text); }
.suit--red   { color: var(--accent); }
.tile h2 { margin: 0 0 6px; font-size: 20px; }
.tile p { color: var(--muted); font-size: 15px; margin: 0 0 16px; }
.tile .cta { margin-top: auto; font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--tile-accent, var(--accent)); }

/* ---------- bits ---------- */
.tag {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.badge {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line-firm); color: var(--muted);
}
.badge--soon { border-color: var(--brass); color: var(--brass); }
.lede { font-size: clamp(18px, 2.4vw, 21px); color: var(--muted); max-width: var(--measure); }

.btn {
  display: inline-block; font: inherit; font-weight: 700; font-size: 15px;
  padding: 11px 22px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--text); color: var(--text);
  background: transparent; text-decoration: none;
}
.btn:hover { background: var(--text); color: var(--bg); }
.btn--buy { border-color: var(--accent); color: #FFFFFF; background: var(--accent); }
.btn--buy:hover { background: var(--text); border-color: var(--text); color: var(--bg); }

/* ---------- affiliate disclosure ----------
   FTC wants this clear, conspicuous and ABOVE the links it covers - never
   only in the footer. strategy.md section 8. */
.disclosure {
  border: 1px solid var(--line-firm);
  border-left: 4px solid var(--brass);
  background: var(--surface-2);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 28px;
}
.disclosure strong { color: var(--text); }

/* ---------- product pick ---------- */
.pick { display: grid; grid-template-columns: 54px 1fr; gap: 18px; align-items: start; }
.pick + .pick { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); }
.pick .rank {
  display: grid; place-items: center;
  width: 54px; height: 76px; border-radius: 7px;
  border: 1.5px solid var(--line-firm); background: var(--surface-2);
  font-weight: 700; font-size: 20px; color: var(--accent);
}
.pick h3 { margin: 0 0 2px; font-size: 19px; }
.pick .who { color: var(--muted); font-size: 14px; margin: 0 0 8px; font-weight: 500; }
.pick ul { margin: 0 0 12px; padding-left: 18px; font-size: 15.5px; }
.pick .links { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pick .note { font-size: 13.5px; color: var(--muted); }

/* ---------- inline glossary term ----------
   A real link, not a bare tooltip: hover and keyboard focus reveal the short
   definition, and following it lands on the full entry. That way it works on
   touch, where there is no hover, and in a screen reader, which reads the link
   text and the aria-describedby bubble. */
.term {
  position: relative;
  font-style: normal;
  color: inherit;
  text-decoration: underline dotted;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  cursor: help;
}
.term:hover, .term:focus-visible { text-decoration-style: solid; color: var(--accent); }
/* The definition lives in data-def and is drawn by CSS, NOT as a child element.
   A <span> inside the link sits in the text flow, so anything reading linearly -
   screen readers, reader mode, text extraction, search snippets - splices the
   definition into the middle of the sentence. "Hearts is a trick-takingA game
   where each player plays one card... game for four" was the live result. */
.term::after {
  content: attr(data-def);
  /* visibility:hidden still contributes to scroll width, so a tooltip centered
     on a term near the right edge pushed the PAGE sideways at 320px (1.4.10).
     clip-path removes it from layout overflow entirely while hidden. */
  position: absolute; bottom: calc(100% + 9px); left: 50%;
  transform: translateX(-50%) translateY(3px);
  width: max-content; max-width: min(300px, 78vw);
  clip-path: inset(0);
  background: var(--ink); color: var(--ivory);
  font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.45;
  text-align: left; text-decoration: none;
  padding: 10px 13px; border-radius: 9px;
  box-shadow: 0 10px 28px -10px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden;
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  z-index: 60; pointer-events: none;
}
.term::before {
  content: ""; position: absolute; bottom: calc(100% + 3px); left: 50%;
  margin-left: -6px; border: 6px solid transparent; border-top-color: var(--ink);
  opacity: 0; visibility: hidden; transition: opacity .14s ease, visibility .14s;
  z-index: 61;
}
.term:hover::after, .term:focus-visible::after {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  clip-path: none;
}
.term:hover::before, .term:focus-visible::before { opacity: 1; visibility: visible; }
/* near the left or right edge, stop the bubble hanging off the page */
.term.term--l::after { left: 0; transform: translateX(0) translateY(3px); }
.term.term--l:hover::after, .term.term--l:focus-visible::after { transform: translateX(0) translateY(0); }
.term.term--r::after { left: auto; right: 0; transform: translateX(0) translateY(3px); }
.term.term--r:hover::after, .term.term--r:focus-visible::after { transform: translateX(0) translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .term::after, .term::before { transition: none; }
}

/* ---------- glossary page ---------- */
.gl-jump { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 30px; }
.gl-jump a {
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line-firm); color: var(--muted); text-decoration: none;
}
.gl-jump a:hover { border-color: var(--accent); color: var(--accent); }
.gl-entry { padding: 22px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.gl-entry:last-child { border-bottom: 0; }
.gl-entry h2 { margin: 0 0 3px; font-size: 20px; margin-top: 0; }
.gl-entry .short { color: var(--muted); font-size: 15px; margin: 0 0 9px; font-weight: 500; }
.gl-entry p.long { margin: 0 0 10px; }
.gl-entry .also { font-size: 14px; color: var(--muted); }
.gl-entry .also a { color: var(--accent); text-decoration: none; }
.gl-entry .also a:hover { text-decoration: underline; }

/* ---------- comparison table ---------- */
/* 1.4.10 Reflow: a wide table may scroll inside its own box, but it must not
   make the PAGE scroll sideways. Without max-width the container grows to the
   table's 520px intrinsic width and pushes the document out - measured at 61px
   of horizontal page scroll at a 320px viewport. max-width pins it to the
   column; -webkit-overflow-scrolling keeps the inner scroll smooth on iOS. */
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
  margin: 0 0 24px;
  -webkit-overflow-scrolling: touch;
}
/* 1.4.10: nothing may make the document scroll sideways. Setting overflow-x
   on html alone propagates to the viewport without clipping, so it must be on
   both. Inner scroll containers (.table-scroll) still scroll normally. */
html, body { overflow-x: hidden; max-width: 100%; }
/* min-width belongs ONLY to tables inside a scroll container. Applying it to
   every table pushed the trainer layouts and the cribbage breakdown past the
   viewport too, and a bare `table` selector also caught tables that have no
   business being 520px wide. 1.4.10 allows a data table to scroll inside its
   own box; it does not allow the page to scroll. */
table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
.table-scroll > table { min-width: 520px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding: 40px 0 calc(40px + env(safe-area-inset-bottom, 0px));
  font-size: 14.5px; color: var(--muted);
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .cols { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.site-footer h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 10px; color: var(--text); font-weight: 700; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 7px; }
.site-footer .fine { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13.5px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--text);
  padding: 10px 16px; border-radius: 8px; border: 1px solid var(--line-firm);
}
.skip:focus { left: 16px; top: 16px; z-index: 100; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- gin rummy trainer ---------- */
.gin-wrap { margin: 30px 0; }
.gin-board {
  background: var(--surface); border: 1px solid var(--line-firm);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
}
.g-stats {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline;
  padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}
.g-stat { font-size: 13px; color: var(--muted); }
.g-stat b { font-size: 21px; font-weight: 700; color: var(--text); display: block; line-height: 1.1; }
.g-dw { font-size: 26px !important; }
.g-dw--ok { color: var(--brass) !important; }
.g-dw--gin { color: var(--accent) !important; }
.g-knockable { font-size: 13px; font-weight: 700; color: var(--brass); margin-left: auto; }

.g-row { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 18px; }
.g-lbl { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
         color: var(--muted); margin: 0 0 8px; }
.g-hand { display: flex; flex-wrap: wrap; gap: 7px; }

.gcard {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 46px; height: 64px; padding: 0; flex: 0 0 auto;
  background: var(--surface-2); color: var(--ink);
  border: 1.5px solid var(--line-firm); border-radius: 7px;
  font-family: inherit; line-height: 1.05; cursor: default;
  transition: transform .12s ease, border-color .12s ease;
}
button.gcard { cursor: pointer; }
button.gcard:hover { transform: translateY(-4px); border-color: var(--ink); }
button.gcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gcard .gr { font-size: 16px; font-weight: 700; }
.gcard .gs { font-size: 15px; }
.gcard--red { color: #C0272D; }
.gcard--meld { border-color: var(--brass); border-width: 2.5px; background: #FFFDF4; }
.gcard--dead { opacity: .72; }
.gcard--empty { border-style: dashed; opacity: .5; }

.g-controls { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; }
.g-controls .btn { font-size: 14px; padding: 9px 17px; }
.g-controls .btn:disabled { opacity: .38; cursor: not-allowed; }
.g-controls .btn:disabled:hover { background: transparent; color: var(--text); }

.g-melds { font-size: 14.5px; margin-bottom: 12px; }
.g-muted { color: var(--muted); }
.g-msg {
  font-size: 15px; padding: 12px 15px; border-radius: 9px;
  background: var(--surface-2); border-left: 4px solid var(--line-firm);
  min-height: 1.5em;
}
.g-msg--done { border-left-color: var(--accent); }
.g-legend { font-size: 13.5px; color: var(--muted); margin-top: 14px; }

@media (max-width: 560px) {
  .gcard { width: 40px; height: 57px; }
  .gcard .gr { font-size: 14px; }
  .g-stats { gap: 8px 18px; }
  .g-knockable { margin-left: 0; width: 100%; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gcard { background: #EFEBE0; color: #12141A; }
  :root:not([data-theme="light"]) .gcard--red { color: #C0272D; }
  :root:not([data-theme="light"]) .gcard--meld { background: #FFFDF4; border-color: #C9A44C; }
}
:root[data-theme="dark"] .gcard { background: #EFEBE0; color: #12141A; }
:root[data-theme="dark"] .gcard--red { color: #C0272D; }
:root[data-theme="dark"] .gcard--meld { background: #FFFDF4; border-color: #C9A44C; }

/* ---------- trick-taking trainers ---------- */
.gcard--illegal { opacity: .3; cursor: not-allowed; }
.gcard--back {
  background: repeating-linear-gradient(45deg, #8C2F34 0 6px, #7A282D 6px 12px);
  border-color: #5E1F23;
}
.h-table {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin: 4px 0 20px; padding: 16px 10px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px;
}
.h-seat { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.h-seat--active .h-seatlbl { color: var(--accent); font-weight: 700; }
.h-seatlbl { font-size: 12px; color: var(--muted); margin: 0; text-align: center; }
.h-stats { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline;
           padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.h-hand { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
@media (max-width: 560px) {
  .h-table { gap: 6px; padding: 12px 6px; }
  .h-seatlbl { font-size: 11px; }
}

/* ---------- cribbage counting drill ---------- */
.c-deal { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 18px; }
.c-hand, .c-starter { display: flex; gap: 7px; }
.c-answer { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.c-input {
  font: inherit; font-size: 17px; font-weight: 700; width: 92px;
  padding: 9px 13px; border-radius: 9px;
  border: 1.5px solid var(--line-firm); background: var(--surface-2); color: var(--text);
}
.c-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.c-break { width: auto; min-width: 0; margin-top: 12px; font-size: 14.5px; }
.c-break td { padding: 5px 16px 5px 0; border: 0; }
.c-break .c-tot td { border-top: 1px solid var(--line-firm); padding-top: 8px; }
.c-which { margin: 0 0 12px; }
.c-which--crib { color: var(--brass); }

/* ---------- bid-calibration drill ---------- */
.s-hand { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.s-shape { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; }
.s-answer { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.s-input {
  font: inherit; font-size: 17px; font-weight: 700; width: 86px;
  padding: 9px 13px; border-radius: 9px;
  border: 1.5px solid var(--line-firm); background: var(--surface-2); color: var(--text);
}
.s-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- euchre order-it-up drill ---------- */
.e-row { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 10px; }
.e-hand, .e-up { display: flex; gap: 7px; }
.e-shape { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; }

/* Promoted headings keep their card-sized appearance. Level is semantics
   (1.3.1 Info and Relationships); size is presentation. */
.cat h2 { margin: 8px 0 4px; font-size: 18px; }
.idx h2 { margin: 0 0 3px; font-size: 18px; }
.guide-list h2 { margin: 0; font-size: 17.5px; flex: 1 1 auto; }

/* ---------- 2.4.7 Focus Visible (AA) ----------
   Card buttons and the number inputs had focus rings; buttons, links, tiles
   and the glossary pills relied on the browser default, which is a thin dotted
   ring that disappears against the dark theme. One explicit indicator for
   everything focusable, in the accent color, which clears 3:1 against every
   surface in both themes (1.4.11 applies to focus indicators too).
   :focus-visible so it appears for keyboard users without ringing on click. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.tile:focus-visible,
.nav a:focus-visible,
.gl-jump a:focus-visible,
.cat:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
/* The skip link is positioned off-screen until focused; keep its ring tight. */
.skip:focus-visible { outline-offset: 0; }