/* ============================================================================
   /shared/mobile-polish.css  -  global mobile + interaction polish
   Load LAST (after page CSS) so these override hard-coded top:0 / hover-only.
   Pairs with /shared/mobile-polish.js. Safe to include on any page.
   ============================================================================ */
:root {
  --site-header-h: 0px;                                  /* set by mobile-polish.js */
  --mobile-sticky-gap: env(safe-area-inset-top, 0px);
}

/* Sticky section navs must sit BELOW the sticky site header (not at top:0). */
.sweep-pagenav, .smg-pagenav, .gold-pagenav, .pagenav,
.ps-rail, .mobile-section-nav, .hub-nav-sticky, .tm-pagenav {
  position: sticky;
  top: calc(var(--site-header-h) + var(--mobile-sticky-gap));
  z-index: 90;
}
section[id], [data-spy-section] {
  scroll-margin-top: calc(var(--site-header-h) + 58px);
}

/* Bottom sticky CTA: respect iPhone safe-area, never cover content. */
.sticky-cta { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
body.sticky-cta-on { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

/* Mobile-ready authority tables: scroll on tablet, stack to cards on phone. */
.table-wrap {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border, #e5e7eb); border-radius: 12px; background: #fff;
}
.authority-table { width: 100%; min-width: 720px; border-collapse: collapse; }
@media (max-width: 640px) {
  .table-wrap { overflow: visible; border: 0; background: transparent; }
  .authority-table, .authority-table thead, .authority-table tbody,
  .authority-table tr, .authority-table th, .authority-table td { display: block; width: 100%; }
  .authority-table thead { display: none; }
  .authority-table tr {
    background: #fff; border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px; margin-bottom: 0.8rem; padding: 0.8rem;
  }
  .authority-table td { border: 0; padding: 0.45rem 0; }
  .authority-table td::before {
    content: attr(data-label); display: block; font-size: 0.72rem; font-weight: 800;
    text-transform: uppercase; color: var(--gray-500, #6b7280); margin-bottom: 0.15rem;
  }
}

/* Flip cards: disable 3D under reduced-motion; stack faces so back text is readable. */
@media (prefers-reduced-motion: reduce) {
  .flip-card .flip-inner { transition: none; transform: none !important; }
  .flip-card .flip-front, .flip-card .flip-back { position: static; transform: none; }
  .flip-card .flip-back { margin-top: 0.75rem; }
}

/* Tap-friendly tooltips (work on touch, not hover-only). */
.term-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; background: #eef2ff; color: #1e40af;
  border: 1px solid #c7d2fe; font-size: 0.7rem; font-weight: 800; cursor: pointer; position: relative;
}
.term-tip::after { opacity: 0; visibility: hidden; }
.term-tip[aria-expanded="true"]::after,
.term-tip:hover::after,
.term-tip:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: 140%; left: 50%; transform: translateX(-50%);
  width: min(260px, 72vw); max-width: 72vw; background: #0f172a; color: #fff;
  font-size: 0.78rem; font-weight: 500; line-height: 1.45; padding: 0.55rem 0.7rem;
  border-radius: 8px; z-index: 60; text-align: left; opacity: 1; visibility: visible;
}