/* Small rules every page needs (_Layout loads this on every public page). */

/* "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; }

/* A form's spam trap (a field only bots fill in: the support form, the Do Not Sell form): off screen, never seen */
.hp-hpot { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Small controls that keep their compact look but need a finger-sized target on touch screens: an invisible tap area of at
   least 44×44px, centered on the control (::after). Touch screens only, so a mouse on a desktop clicks exactly what it sees.
   The controls already absolutely positioned (card corners, over the hero banner) keep that; the rest become
   position:relative so the area sits on them. Left off on purpose: links that sit just under a page's main button (the
   "See all offers" links under Shop / Copy code, the roster link under the share buttons, the hero's exclusions note),
   where the area would land on that button; and the deal cards' icon buttons and the store page's save / share pair,
   which have their own rings (deals-styles.css, merchant-detail.css). */
@media (pointer: coarse) {
  .sp-bookmark-btn::after, .sp-fave-btn::after, .sp-promo-arrow::after, .sp-promo-pause::after, .ext-promo-close::after,
  .sp-share-trigger::after, .sp-nav-avatar::after, .md-earn-protip-cta::after,
  .ext-promo-dismiss::after, .earn-chip::after, .adm-summary-period-btn::after, .adm-activity-filter-chip::after, .adm-expand-btn::after,
  .adm-period-btn::after, .adm-addteam-hd-btn::after, .adm-team-card-editgoal::after, .adm-detail-logo-btn::after,
  .sh-hero-steps-check::after, .sh-hero-steps-toggle::after, .sh-nav-goal-mini::after, .si-pw-toggle-btn::after,
  .lang-menu-trigger::after, .hn-link::after, .nav-how::after, .hn-logo::after, .sp-nav-logo::after, .nav-logo::after, .sh-logo::after,
  .mts-card-link::after, .mts-shop-link::after, .md-hero-about-link::after, .reg-gate-cross-link::after, .supp-start-link::after,
  .earn-txn-empty-cta::after, .earn-goes-link::after, .adm-team-card-hublink::after, .sp-dc-brand::after,
  .adm-logo::after, .adm-bell-btn::after, .adm-avatar-btn::after, .adm-nav-burger::after, .sh-nav-dash::after,
  .sp-nav-burger::after, .sp-bell-btn::after, .sp-resume-dismiss::after, .dls-sec-more::after,
  .dls-urgency-pause::after, .sp-cat-sec-see-all::after, .sp-hotdeals-urgency-badge::after, .signin-cta a::after,
  .rp-coach > summary::after, .mode-switch-btn::after, .hp-nav-btn::after, .sp-featured-arrow::after, .md-breadcrumb a::after,
  .dls-cb-pill::after, .sp-hrow-nav::after {
    content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: max(100%, 44px); height: max(100%, 44px);
  }
  /* The bookmark and heart sit 6px apart: each area stops at the middle of the gap, so neither takes the other's taps */
  .sp-bookmark-btn::after, .sp-fave-btn::after { width: calc(100% + 6px); }
  .sp-share-trigger, .sp-nav-avatar, .md-earn-protip-cta, .ext-promo-dismiss, .earn-chip,
  .adm-summary-period-btn, .adm-activity-filter-chip, .adm-expand-btn, .adm-period-btn, .adm-addteam-hd-btn, .adm-team-card-editgoal,
  .adm-detail-logo-btn, .sh-hero-steps-check, .sh-hero-steps-toggle, .sh-nav-goal-mini, .si-pw-toggle-btn, .lang-menu-trigger, .hn-link,
  .nav-how, .hn-logo, .sp-nav-logo, .nav-logo, .sh-logo, .mts-card-link, .mts-shop-link, .md-hero-about-link, .reg-gate-cross-link,
  .supp-start-link, .earn-txn-empty-cta, .earn-goes-link, .adm-team-card-hublink, .sp-dc-brand,
  .adm-logo, .adm-bell-btn, .adm-avatar-btn, .adm-nav-burger, .sh-nav-dash,
  .sp-nav-burger, .dls-sec-more, .dls-urgency-pause,
  .sp-cat-sec-see-all, .sp-hotdeals-urgency-badge, .signin-cta a,
  .rp-coach > summary, .mode-switch-btn, .hp-nav-btn, .md-breadcrumb a, .dls-cb-pill {
    position: relative;
  }
}

/* Read by screen readers, not shown (a table's caption when a visible heading already names it) */
.ffu-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Team badges show a logo or nothing (window.teamMark, site-chrome.js): whatever element holds a team's mark is
   hidden while the mark is pending — the logo still loading, or none on file — so no page needs its own rule */
:has(> .ffu-mark-pending) { display: none !important; }

/* Phone bottom sheets (Share to Boost, Donate; site-chrome.js ffuSheet): the grab handle that says "this is a sheet"
   and the slide up when one opens (only then: the sheets redraw as they go, and the slide replayed on every step) */
.ffu-sheet-grabber { display: none; }
@media (max-width: 560px) {
  .ffu-sheet-grabber { display: block; width: 36px; height: 4px; border-radius: 999px; background: var(--line-s, rgba(28,33,48,.18)); margin: -8px auto 14px; }
  .ffu-sheet-enter { animation: ffu-sheet-up .22s ease-out; }
}
@keyframes ffu-sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ffu-sheet-enter { animation: none; } }