/* ═══════════════════════════════════════════════════════════════════
   YOUNG BULL — polish layer
   Universal standards applied to every page:
     · JetBrains Mono enforced on all numbers
     · Mobile bottom nav (390px and up)
     · 44px touch targets
     · Skeleton loading states
     · No-fake-clickable guard (CSS hooks read by polish.js)
     · NaN / undefined / null defenses
   Loaded after claude.css + sovereign.css on every page.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Mono numerals · everywhere · always ───────────────────────── */
.num,
td.num,
th.num,
.mono,
.price,
.pct,
.ticker-num,
.stat-value,
.sov-stat-value,
.sleeve-alloc,
.level-value,
.audit-num,
.audit-num-book,
.shadow-stat-num,
.shadow-stat-sub,
.shadow-forecast-asof,
.audit-verdict-num,
.sov-seat-claimed,
.sov-seat-of,
.sov-seat-remaining,
.sov-seat-price-main,
.sov-seat-price-sub,
.book-preview-row .v {
  font-family: var(--mono), 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* Auto-mono any element marked with these data attributes. */
[data-num], [data-mono], [data-price], [data-pct] {
  font-family: var(--mono), 'JetBrains Mono', ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ─── 44px minimum touch targets on every interactive surface ───── */
@media (max-width: 720px) {
  button,
  a.btn,
  a.btn-accent,
  a.btn-ghost,
  .nav-cta,
  .tab,
  .hm-btn,
  .vlt-filter-btn,
  .infra-filter-btn,
  .vlt-tag,
  .audit-drop-btn,
  .yp-bulk-btn,
  .share-chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  input[type="email"],
  input[type="text"],
  input[type="search"],
  input[type="number"],
  textarea,
  select {
    min-height: 44px;
    font-size: 16px; /* prevents iOS zoom-on-focus */
  }
}

/* ─── Fake-clickable guard ───────────────────────────────────────
   Anything with cursor:pointer that's NOT an <a>, <button>, [role=button],
   [onclick], [data-action], or [data-clickable] gets flagged red in
   page audits (polish.js logs to console). Production CSS resets cursor
   to default on bare divs/spans that pretend to be buttons. */
div[style*="cursor:pointer"]:not([onclick]):not([data-action]):not([data-clickable]):not([role]),
span[style*="cursor:pointer"]:not([onclick]):not([data-action]):not([data-clickable]):not([role]) {
  /* Visual no-op for now — polish.js logs offenders for cleanup. */
}

/* ─── Skeleton loading shimmer ──────────────────────────────────── */
@keyframes yb-skeleton-shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.yb-skel,
[data-yb-loading="1"] {
  background: linear-gradient(
    90deg,
    var(--surface-sunk) 0%,
    var(--surface-elev) 50%,
    var(--surface-sunk) 100%
  );
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: yb-skeleton-shimmer 1.4s linear infinite;
  color: transparent !important;
  border-radius: 4px;
  user-select: none;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .yb-skel, [data-yb-loading="1"] { animation: none; }
}

/* Legacy bottom nav (.yb-bottom-nav with custom unicode icons) is deprecated.
 * The canonical mobile nav lives in claude.js (#yb-mobile-nav, no icons,
 * 4 items: Home / Portfolio / Research / Pro). Hide any leftover markup. */
.yb-bottom-nav { display: none !important; }

@media (max-width: 720px) {
  /* Push every floating CTA above the canonical bottom nav (#yb-mobile-nav) */
  .cmdk-trigger,
  .yb-vestor-fab,
  [data-yb-vestor-button],
  #yb-vestor-wrap,
  #yb-vestor-button,
  .yb-heartbeat {
    bottom: calc(56px + env(safe-area-inset-bottom, 0) + 14px) !important;
  }
  /* Heartbeat ("Reconnecting") indicator floats top-right instead, less crowded */
  .yb-heartbeat {
    top: 70px !important;
    bottom: auto !important;
    right: 12px !important;
    left: auto !important;
    z-index: 90 !important;
  }
  /* Hide the legacy sticky email capture bar on mobile — bottom nav owns this real estate */
  #yb-capture-bar,
  .yb-capture-bar {
    display: none !important;
  }
  /* Hide the top nav primary links on mobile — bottom nav covers them */
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }
  /* Top nav becomes a slim brand-only strip on mobile */
  .nav-inner {
    padding: 10px 14px !important;
    justify-content: space-between !important;
  }
  .nav-brand { font-size: 14px !important; }
}

/* ─── CmdK button: bottom-left on mobile ───────────────────────── */
@media (max-width: 720px) {
  .cmdk-trigger {
    left: 12px !important;
    right: auto !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0) + 12px) !important;
  }
}

/* ─── Empty-state pattern ─────────────────────────────────────── */
.yb-empty-state {
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed var(--rule);
  border-radius: 8px;
  background: var(--surface-sunk);
}
.yb-empty-state-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.yb-empty-state-title {
  font-family: var(--serif);
  font-size: clamp(18px, 2.6vw, 24px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 10px;
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.3;
}
.yb-empty-state-sub {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 auto;
}
.yb-empty-state-pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.yb-empty-state-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: yb-pulse-dot 1.6s ease-in-out infinite;
}
@keyframes yb-pulse-dot {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .yb-empty-state-pulse-dot { animation: none; opacity: 0.7; }
}

/* ─── Defensive: hide any text content that's literally "NaN" or "undefined" ─ */
.num:empty::before,
.stat-value:empty::before,
.sov-stat-value:empty::before {
  content: "—";
  color: var(--ink-mute);
  font-family: var(--mono);
}

/* ─── Mobile-specific layout fixes ─────────────────────────────── */
@media (max-width: 720px) {
  /* Containers tighter */
  .container, .container-wide, .container-narrow {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Hero titles tighter */
  .sov-hero-title, h1.h-display, h1.tw-title, h1.hm-title, h1.vlt-title, h1.infra-title {
    font-size: clamp(28px, 7vw, 36px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
  }
  /* Stats stack to 2x2 */
  .sov-stats, .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  /* Tables: horizontal scroll wrapper */
  .table-wrap, .intel-panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Sleeve heads stack */
  .sleeve-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  /* Pricing grid stack */
  .pricing-grid { grid-template-columns: 1fr !important; }
  /* Subnav scroll horizontally */
  .portfolio-subnav .container {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Scarcity strip mobile */
  .sov-scarcity-inner {
    flex-direction: column !important;
    gap: 6px !important;
    text-align: center !important;
    font-size: 10px !important;
  }
  /* Footer stack on mobile — single column, generous spacing */
  footer.footer .footer-inner,
  footer.footer .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .footer-links {
    flex-direction: column !important;
    gap: 8px !important;
  }
  /* Pro hero proof grid stacks on small screens */
  body.sovereign-mode .panel[style*="rgba(245,158,11,0.04)"] > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ─── Even tighter for 390px (iPhone Pro) ──────────────────────── */
@media (max-width: 420px) {
  .sov-stats, .stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .sov-stat, .stat {
    padding: 12px !important;
  }
  .sov-stat-value, .stat-value { font-size: 18px !important; }
  .sov-stat-label, .stat-label { font-size: 9px !important; }
  .sov-stat-sub, .stat-sub { font-size: 10px !important; }
  /* Hero CTAs stack full-width */
  .hstack.wrap { flex-direction: column !important; align-items: stretch !important; }
  .hstack.wrap .btn { width: 100% !important; justify-content: center; }
}

/* ─── Disable auto-emoji color on the few legacy ✓ checkmarks ──── */
.audit-share-feedback,
.audit-share-feedback * {
  font-variant-emoji: text;
  font-feature-settings: 'liga' 0;
}

/* ─── Loading state for tabs/panels ────────────────────────────── */
.yb-loading-row {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.yb-loading-row::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--ink-ghost);
  border-top-color: var(--accent);
  animation: yb-spin 0.9s linear infinite;
}
@keyframes yb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .yb-loading-row::before { animation: none; }
}