/* HRK PWA app-shell — global rules that make the standalone-installed
 * site feel like a native iOS app. Loaded on every page via the head
 * block managed by scripts/inject_pwa_head.py.
 *
 * Only the rules that ALWAYS apply (regardless of standalone) live in
 * the :root block. Rules that activate only when running as installed
 * PWA are scoped inside @media (display-mode: standalone) and the
 * supports-based standalone selector for older iOS Safari (which
 * never updated to support display-mode: standalone in the matcher
 * sense — uses navigator.standalone via JS to add .pwa-standalone).
 */

:root {
  /* iPhone X+ safe-area insets. Pages opt in by padding with these. */
  --hrk-safe-top:    env(safe-area-inset-top, 0px);
  --hrk-safe-right:  env(safe-area-inset-right, 0px);
  --hrk-safe-bottom: env(safe-area-inset-bottom, 0px);
  --hrk-safe-left:   env(safe-area-inset-left, 0px);

  /* Bottom tab bar height — used by pages to reserve scroll room. */
  --hrk-tabbar-h: 50px;
}

html, body {
  /* Block iOS's pull-to-refresh + overscroll bounce on the document.
     Inner scrollable elements (tables, dialogs) keep their own scroll. */
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* Tap highlight is the grey rectangle that flashes when you tap a link
   on iOS Safari. Pure giveaway that you're in a browser. Kill it. */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Prevent iOS from auto-zooming when you focus an <input> with
   font-size < 16px. Apply to text inputs only (other elements may
   legitimately want smaller text). */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
  font-size: 16px;
}

/* Hide caret in non-input UI text (e.g., tappable cards): prevents the
   blinking text cursor showing if someone double-taps. */
:root { caret-color: transparent; }
input, textarea, [contenteditable] { caret-color: auto; }

/* Disable text selection on UI chrome — the topbar shouldn't be
   selectable. Pages override on prose content (article, etc.). */
header, nav, footer, .hrk-install-prompt {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ─── Bottom tab bar — installed / standalone PWA only ───
 * 5 quick-access tabs that make the installed app feel native. Renders
 * only in standalone (pwa.js gates it). It COEXISTS with the hamburger
 * top nav — we deliberately do NOT hide the nav (the earlier version did,
 * which lost access to ~13 pages). The tab bar is purely additive.
 * Visible only in browser tabs: never (display:none default below). */

.hrk-tabbar { display: none; }

/* Standalone (installed): show the bar + reserve scroll room so page
   content (e.g. the leaderboard's bottom rows) clears it. Two selectors:
   the @media for modern standalone, and html.pwa-standalone (pwa.js adds
   it) for older iOS Safari that sets navigator.standalone but doesn't
   match the media query. */
@media all and (display-mode: standalone) {
  body { padding-bottom: calc(var(--hrk-tabbar-h) + var(--hrk-safe-bottom)); }
  .hrk-tabbar { display: flex; }
}
html.pwa-standalone body {
  padding-bottom: calc(var(--hrk-tabbar-h) + var(--hrk-safe-bottom));
}
html.pwa-standalone .hrk-tabbar { display: flex; }

.hrk-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--hrk-tabbar-h) + var(--hrk-safe-bottom));
  padding-bottom: var(--hrk-safe-bottom);
  background: rgba(10, 8, 8, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  align-items: stretch;
  justify-content: space-around;
  z-index: 1000;
  font-family: 'Inter', system-ui, sans-serif;
}
.hrk-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-decoration: none;
  color: #8a8a98;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  gap: 2px;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}
.hrk-tab.active { color: #F5C542; }
.hrk-tab .hrk-tab-icon {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
}
.hrk-tab .hrk-tab-label {
  font-size: 10px; line-height: 1; text-transform: uppercase;
}

/* In standalone, lift the chat bubble clear of the tab bar (it used to
   sit on top of the Account tab) and stop the hamburger drawer at the top
   of the tab bar so the bar doesn't cover the bottom menu items. */
html.pwa-standalone .hrk-chat-btn {
  bottom: calc(var(--hrk-tabbar-h) + var(--hrk-safe-bottom) + 16px) !important;
}
@media all and (display-mode: standalone) {
  .hrk-chat-btn {
    bottom: calc(var(--hrk-tabbar-h) + var(--hrk-safe-bottom) + 16px) !important;
  }
}
html.pwa-standalone #hrk-mobile-drawer {
  bottom: calc(var(--hrk-tabbar-h) + var(--hrk-safe-bottom)) !important;
}
@media all and (display-mode: standalone) {
  #hrk-mobile-drawer {
    bottom: calc(var(--hrk-tabbar-h) + var(--hrk-safe-bottom)) !important;
  }
}

/* ─── "Add to Home Screen" prompt ─── */

.hrk-install-prompt {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + var(--hrk-safe-bottom));
  z-index: 2000;
  background: linear-gradient(135deg, rgba(20, 20, 26, 0.98), rgba(14, 14, 18, 0.98));
  border: 1px solid rgba(245, 197, 66, 0.4);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
  font-family: 'Inter', system-ui, sans-serif;
  color: #f1e7dd;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  animation: hrk-install-slide-in 0.35s ease-out;
}
@keyframes hrk-install-slide-in {
  from { opacity: 0; transform: translateY(80px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hrk-install-prompt .hrk-install-title {
  font-weight: 800;
  font-size: 14px;
  color: #F5C542;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.hrk-install-prompt .hrk-install-steps {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: #d4cabb;
}
.hrk-install-prompt .hrk-install-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.hrk-install-prompt .hrk-install-steps .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(245, 197, 66, 0.15);
  color: #F5C542;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.hrk-install-prompt .hrk-install-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: 0;
  color: #8a8a98;
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
}
.hrk-install-prompt .hrk-install-close:active {
  color: #f1e7dd;
}

/* ─── Bottom fixed-element stacking (mobile) ───
 * Several elements anchor to the bottom of the viewport: the iOS install
 * banner (#hrk-pwa-prompt, body.hrk-install-open), the "keep across
 * devices" sync CTA (#hrk-sync-cta, body.hrk-cta-open), and the chat
 * bubble (.hrk-chat-btn). Left uncoordinated they pile up at the same
 * spot — the install banner hid the leaderboard's bottom rows, and the
 * chat bubble covered the CTA's dismiss button. These rules reserve
 * scroll room and lift each element clear of whatever is below it. */
@media (max-width: 900px) {
  /* Reserve scroll room so page content (e.g. the leaderboard table +
     footer) can scroll clear of the fixed install banner. */
  body.hrk-install-open {
    padding-bottom: calc(150px + var(--hrk-safe-bottom)) !important;
  }

  /* Sync CTA sits above the install banner when both are present. */
  body.hrk-install-open #hrk-sync-cta {
    bottom: calc(150px + var(--hrk-safe-bottom)) !important;
  }

  /* Chat bubble lifts clear of whatever bottom banner is showing so it
     never covers a banner's dismiss / action buttons. */
  body.hrk-cta-open .hrk-chat-btn {
    bottom: calc(96px + var(--hrk-safe-bottom)) !important;
  }
  body.hrk-install-open .hrk-chat-btn {
    bottom: calc(150px + var(--hrk-safe-bottom)) !important;
  }
  body.hrk-install-open.hrk-cta-open .hrk-chat-btn {
    bottom: calc(236px + var(--hrk-safe-bottom)) !important;
  }
}

/* Reduce motion respects user preference globally. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}