/* ============================================================================
   PD RESPONSIVE LAYER  —  unified adaptive hardening for phishdestroy.io
   ----------------------------------------------------------------------------
   Linked LAST on every page so it wins the cascade as a safety net. Reuses the
   existing --pd-* design tokens. Intentionally conservative: it removes
   horizontal overflow and improves touch/typography ergonomics WITHOUT resizing
   or repainting the established premium look (no global font-size or container
   overrides that could fight page-specific layouts).
   ============================================================================ */

/* --- responsive tokens the system was missing --- */
:root {
  --pd-bp-sm: 480px;
  --pd-bp-md: 768px;
  --pd-bp-lg: 1024px;
  --pd-bp-xl: 1280px;
  --pd-tap: 44px;                       /* min touch target (WCAG 2.5.5) */
}

/* --- no horizontal scroll on any screen --- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body { overflow-x: hidden; overflow-x: clip; }   /* clip (modern) preserves position:sticky; hidden = fallback */
*, *::before, *::after { min-width: 0; }   /* flex/grid children shrink instead of overflowing */

/* --- media & preformatted content never blow out their box --- */
:where(img, svg, video, canvas, picture, iframe, embed, object) { max-width: 100%; }
:where(img, video) { height: auto; }
:where(pre) { max-width: 100%; overflow-x: auto; }
.pd-scroll-x { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- long domains / hashes / URLs (everywhere on this site) must wrap --- */
:where(p, li, dd, figcaption, blockquote, .a-domain, .mono) { overflow-wrap: break-word; }
:where(a, code) { overflow-wrap: anywhere; }   /* long URLs/hashes break even inside inline-flex */
:where(h1, h2, h3, h4) { overflow-wrap: break-word; text-wrap: balance; }

/* --- wide data tables scroll horizontally on phones instead of clipping/pushing --- */
@media (max-width: 768px) {
  :where(main table, article table, .content table, section table) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- touch ergonomics on coarse pointers (phones/tablets) --- */
@media (pointer: coarse) {
  :where(header a, nav a, footer a, .btn, .pd-btn, button, [role="button"]) {
    min-height: var(--pd-tap);
  }
  :where(header a, nav a, footer a) {
    display: inline-flex;
    align-items: center;
  }
}

/* --- wide data tables scroll inside their own box instead of being clipped --- */
:where(.pd-table-wrap) { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- filter / control toolbars: wrap on small screens so no control hides off-screen --- */
@media (max-width: 640px) {
  :where(.filters, .filter-bar, .filters-row, .toolbar, .controls, .tabs, .pd-tabs, .chip-row) {
    flex-wrap: wrap;
  }
  :where(.filter-pills, .pill-row, .chips) { flex-wrap: wrap; }
  :where(.filter-select, .filter-pills, .search-box, .toolbar > *) { max-width: 100%; }
}

/* --- app-shell layouts (fixed sidebar + main) must stack when the sidebar
       drops into flow on small screens, or main collapses and content clips --- */
@media (max-width: 768px) {
  :where(.app, .app-shell, .layout, .page-shell) { flex-direction: column; }
}

/* --- phone breakpoint: stop iOS auto-zoom on focus, guard marquee width --- */
@media (max-width: 480px) {
  :where(input, select, textarea) { font-size: max(16px, 1rem); }
  :where(.pd-activity-rail) { max-width: 100%; overflow: hidden; }
}

/* ============================================================================
   MOTION LAYER  —  cohesive micro-interactions, tasteful not heavy.
   The site is already animation-rich (AOS + many keyframes), so this ADDS only
   connective polish and, crucially, a site-wide reduced-motion umbrella.
   Everything here uses transform/opacity only (zero layout shift → no CLS hit).
   ============================================================================ */

/* smooth in-page anchor scrolling (the site has jump-navs) */
@media (prefers-reduced-motion: no-preference) {
  :where(html) { scroll-behavior: smooth; }

  /* gentle transition fallback where an element defines none of its own */
  :where(a, button, .btn, .pd-btn, .card, .tool-card, .pd-card, input, select, textarea) {
    transition: color .2s ease, background-color .2s ease, border-color .2s ease,
                transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s ease, opacity .2s ease;
  }
  /* tactile press feedback — subtle, feels premium, unlikely to conflict */
  :where(.btn, .pd-btn, button, [role="button"]):active { transform: translateY(1px) scale(.995); }
}

/* keyboard focus ring — accessibility polish, brand-coloured */
:where(a, button, .btn, .pd-btn, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--pd-accent, #22c55e);
  outline-offset: 2px;
  border-radius: var(--pd-radius-xs, 6px);
}

/* respect users who ask for less motion — neutralises the site's pulses/glows/
   breathing/AOS too. Big accessibility + Core Web Vitals (CLS/INP) win. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  :where([data-aos]) { opacity: 1 !important; transform: none !important; }
}