/* =============================================================
   MOBILE / TOUCH DEVICE OVERRIDES
   Disables decorative hover effects on devices without a pointer.
   Converts hover-only tooltips to tap-to-reveal.
   ============================================================= */

/* ─── 1. KILL ALL DECORATIVE HOVER LIFTS & GLOWS ─── */
@media (hover: none) {

  /* Buttons — no lift, no glow, no scale */
  .btn-primary:hover,
  .btn-accent:hover,
  .btn-secondary:hover,
  .btn-ghost:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Cards — no lift, no shadow change, no border glow */
  .kpi-card:hover,
  .spotlight-card:hover,
  .feature-card:hover,
  .toolkit-card:hover,
  .resource-card:hover,
  .offer-rec-card:hover,
  .pain-card:hover,
  .swn-card:hover,
  .clickable-kpi:hover {
    transform: none !important;
    box-shadow: inherit !important;
  }

  /* Spotlight card hover extras */
  .spotlight-card:hover .spotlight-cta {
    gap: 8px !important;
  }
  [data-theme="light"] .spotlight-card:hover {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    box-shadow: none !important;
  }

  /* Feature card gradient border on hover */
  .feature-card:hover::before {
    opacity: 0 !important;
  }

  /* Nav items */
  .nav-item:hover {
    background: transparent !important;
    color: inherit !important;
  }

  /* Step items, action items, checklist items */
  .step-item:hover,
  .action-item:hover,
  .checklist-item:hover,
  .check-label:hover,
  .doc-row:hover {
    background: inherit !important;
    transform: none !important;
  }

  /* Sidebar items */
  .sidebar-icon-btn:hover,
  .theme-toggle:hover,
  .theme-toggle-topbar:hover,
  .icon-btn:hover {
    background: transparent !important;
    color: inherit !important;
  }

  /* Pills and chips */
  .suggestion-chip:hover,
  .scenario-chip:hover,
  .pathway-pill:hover,
  .smart-tool-chip:hover,
  .cit-topic:hover,
  .mode-pill:hover:not(.active) {
    border-color: inherit !important;
    color: inherit !important;
    background: inherit !important;
  }
  [data-theme="dark"] .pathway-pill:hover {
    border-color: inherit !important;
    background: inherit !important;
  }

  /* Form/upload zones */
  .upload-zone:hover {
    border-color: inherit !important;
    background: inherit !important;
  }

  /* Misc interactive items */
  .handoff-option:hover,
  .template-item:hover,
  .ob-option:hover,
  .ob-next-step:hover,
  .search-result-item:hover,
  .search-trigger:hover,
  .cit-check-item:hover,
  .country-picker-btn:hover,
  .cd-option:hover,
  .card-toggle:hover,
  .gs-task:hover,
  .gs-dismiss:hover,
  .focus-show-more:hover,
  .gear-dropdown-item:hover,
  .gear-dropdown-logout:hover,
  .account-tab:hover,
  .tab:hover {
    transform: none !important;
    background: inherit !important;
  }

  /* FAB */
  .fab-trigger:hover {
    transform: none !important;
  }
  .fab-action:hover {
    background: inherit !important;
  }
  .chat-fab:hover {
    transform: none !important;
  }

  /* Links */
  .toolkit-back-btn:hover {
    text-decoration: none !important;
  }
  .section-breadcrumb a:hover {
    text-decoration: none !important;
  }
  .demo-banner-link:hover,
  .demo-banner-close:hover {
    background: inherit !important;
    color: inherit !important;
  }
  .referral-banner:hover {
    transform: none !important;
  }

  /* Nudge */
  .nudge-go:hover {
    opacity: 1 !important;
  }

  /* Sidebar what's next */
  .swn-header:hover {
    color: inherit !important;
  }
  .swn-header:hover .swn-toggle-icon {
    opacity: inherit !important;
  }
  .sidebar-next-step:hover .sns-arrow {
    transform: none !important;
  }

  /* Nav group labels */
  .nav-group-label:hover {
    color: inherit !important;
  }
  .nav-group-label:hover .nav-group-icon {
    opacity: inherit !important;
  }

  /* Fav button */
  .toolkit-card:hover .fav-btn {
    opacity: 0 !important;
  }
  .fav-btn.active {
    opacity: 1 !important;
  }
  .fav-btn:hover {
    transform: none !important;
  }

  /* Score panel, card generic */
  .score-panel:hover,
  .card:hover {
    transform: none !important;
    box-shadow: inherit !important;
  }

  /* Chat tools */
  .chat-tool-btn:hover,
  .chat-send:hover {
    background: inherit !important;
    color: inherit !important;
  }

  /* Lang toggle */
  .lang-toggle:hover {
    background: inherit !important;
    color: inherit !important;
  }

  /* Pathway show all */
  .pathway-show-all-btn:hover {
    background: inherit !important;
  }

  /* Dimmed toolkit on hover */
  .toolkit-card.pathway-dimmed:hover {
    opacity: inherit !important;
    transform: none !important;
  }

  /* Toolkit locked overlay on hover */
  .toolkit-locked:hover::before {
    background: inherit !important;
    color: inherit !important;
  }

  /* Demo gate CTA */
  .demo-gate-overlay .demo-gate-cta:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* ─── 2. CLICKABLE KPI ARROW — always visible on touch ─── */
  .clickable-kpi::after {
    opacity: 0.5 !important;
  }

  /* ─── 3. TERM TOOLTIPS — tap to toggle instead of hover ─── */
  /* Hide tooltip on hover (JS will handle tap) */
  .term-tooltip:hover .tt-popup {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  /* Show tooltip when tapped (JS adds .tt-active class) */
  .term-tooltip.tt-active .tt-popup {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* ─── 4. JARGON TOOLTIPS — tap to toggle ─── */
  .jargon-term:hover {
    background: inherit !important;
    color: inherit !important;
  }

  /* ─── 5. HELP TOOLTIPS — already JS-driven, just ensure no sticky hover ─── */
  .help-tooltip-action:hover {
    background: inherit !important;
  }
}

/* =============================================================
   TOUCH TARGET FLOORS
   Tops up icon-only / compact controls that render under the
   ~44px minimum recommended tap-target size on narrow viewports.
   Additive only (min-width/min-height floors + padding on inline-
   styled controls that have no class hook) — never changes icon
   size, layout, or desktop (>768px) rendering.
   ============================================================= */
@media (max-width: 768px) {
  /* Header icon buttons (notification bell, theme toggle, account).
     responsive.css floors their height under @media(pointer:coarse),
     but that condition doesn't reliably fire in every environment and
     width was never floored on any breakpoint, so set both explicitly
     here rather than depend on the pointer-capability query. */
  .icon-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  /* Sidebar bell/gear icons ship at a fixed 28x28 with no mobile
     override anywhere else in this CSS bundle. */
  .sidebar-icon-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  /* app.css collapses this to an unprotected 36x36 icon-only circle
     on mobile (min-width: unset) with no touch-target floor. Needs
     !important: the button also carries an inline style attribute
     (display:flex, padding:6px 12px) from portal-layout.tsx, and a
     non-important min-height here was observed losing to app.css's
     explicit height:36px on this flex-item button. */
  .search-trigger {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  /* EN/FR pill toggles (portal top bar + public auth pages) are
     rendered from inline styles with no responsive treatment;
     src/components/layout/portal-layout.tsx and
     src/components/AuthLangToggle.tsx add this class alongside the
     existing inline style, so !important is needed to win over it. */
  .sw-lang-btn {
    padding: 10px 14px !important;
    min-height: 44px !important;
  }
}

/* Password show/hide toggle on login/signup/update-password: icon-only
   button with zero padding (measured 20x20 tap target). Expand the hit
   area with an invisible pseudo-element instead of real padding, so the
   eye icon's visual position inside the input never shifts at any
   breakpoint. */
@media (max-width: 768px) {
  .sw-eye-toggle::before {
    content: '';
    position: absolute;
    inset: -12px;
  }
}

/* Close (X) buttons with zero/undersized padding on: the Add Document /
   Add-Edit Family Member dialogs (src/app/documents/page.tsx,
   src/app/family/page.tsx, and their src/app/my-profile/*TabContent.tsx
   duplicates, 20x20), the onboarding step header
   (src/app/onboarding/OnboardingClient.tsx, 32x32), and the CRS
   simulator back button (src/app/scores/content.tsx, 36x36). Same
   invisible-hit-area technique; needs position:relative since these
   buttons aren't already absolutely positioned. */
@media (max-width: 768px) {
  .sw-icon-hit {
    position: relative;
  }
  .sw-icon-hit::before {
    content: '';
    position: absolute;
    inset: -12px;
  }
}

/* Settings page's twoColGrid (name, immigration profile, and password
   field pairs, src/app/settings/page.tsx:809-813) is a plain inline
   style object with no responsive treatment, unlike its sibling grid
   in the CRS calculator (.tk-personal-grid). Same stacking fix,
   mirrored breakpoint. */
@media (max-width: 600px) {
  .sw-two-col-grid {
    grid-template-columns: 1fr !important;
  }
}