/* Edge Responsive Runtime — global, conservative, device-aware */
:root {
  --edge-safe-top: env(safe-area-inset-top, 0px);
  --edge-safe-right: env(safe-area-inset-right, 0px);
  --edge-safe-bottom: env(safe-area-inset-bottom, 0px);
  --edge-safe-left: env(safe-area-inset-left, 0px);
  --edge-page-gutter: clamp(16px, 3vw, 40px);
  --edge-content-max: 1240px;
  --edge-touch-target: 44px;
  --edge-vh: 1vh;
  --edge-vw: 1vw;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

*, *::before, *::after { box-sizing: border-box; }

img, picture, video, canvas, svg {
  max-width: 100%;
}

img, video { height: auto; }

iframe, embed, object {
  max-width: 100%;
}

main, section, article, aside, header, footer, nav,
.container, .wrapper, .main-container, .main, .edge-journal,
.gamer-home, .posts-index, .tools-index, .photo-cleaner {
  min-width: 0;
}

p, li, a, span, strong, code, pre, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: anywhere;
}

pre, code { max-width: 100%; }
pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  max-width: 100%;
}

input, textarea, select, button { max-width: 100%; }

/* Modern viewport units with safe fallbacks */
.ema-hero,
.edge-fullscreen,
[data-fullscreen="true"] {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}

/* Safe areas for notches, rounded screens and browser chrome */
body > header:first-child,
.ema-hero,
.left-sidebar {
  padding-top: max(var(--edge-safe-top), 0px);
}

body > footer:last-child {
  padding-bottom: max(var(--edge-safe-bottom), 0px);
}

/* Blog / Journal fluid hardening */
.edge-journal,
.gamer-home,
.posts-index,
.tools-index,
.photo-cleaner {
  width: min(100%, var(--edge-content-max));
  padding-left: max(var(--edge-page-gutter), var(--edge-safe-left));
  padding-right: max(var(--edge-page-gutter), var(--edge-safe-right));
}

.ej-intro-grid,
.ej-lead,
.ej-grid,
.ej-categories,
.ej-lab,
.g-hud,
.g-grid,
.g-cats,
.posts-card-grid,
.tools-card-grid,
.tool-workspace,
.tool-workspace--unified,
.tool-hero-grid,
.tool-howto,
.tool-download-bar {
  min-width: 0;
}

.ej-feature,
.ej-card,
.posts-card,
.tools-card,
.tool-panel,
.g-card,
.g-panel {
  min-width: 0;
  max-width: 100%;
}

.ej-feature-art img,
.ej-card-art img,
.posts-card-media img,
.g-card-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Main Edge homepage */
.ema-hero {
  padding-left: max(20px, var(--edge-safe-left));
  padding-right: max(20px, var(--edge-safe-right));
  padding-bottom: max(64px, calc(48px + var(--edge-safe-bottom)));
}

.ema-hero__inner {
  width: min(100%, 920px);
}

.ema-hero__glow {
  max-width: 92vw;
  max-height: 92vw;
}

/* Coarse pointers = fingers. Never require precision tapping. */
@media (pointer: coarse) {
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn, .button, .tool-button,
  .newsletter-submit,
  .posts-pagination-prev,
  .posts-pagination-next,
  .article-share-actions a,
  .article-share-actions button,
  nav a,
  .menu a {
    min-height: var(--edge-touch-target);
  }

  .article-list > li article:hover,
  .widget-card:hover,
  .posts-card:hover,
  .tools-card:hover,
  .g-card:hover,
  .sidebar-tool:hover {
    transform: none !important;
  }
}

/* Hover effects only on devices that truly hover. */
@media (hover: none) {
  a:hover, button:hover { -webkit-tap-highlight-color: transparent; }
}

/* PHONE — based on usable geometry; JS also keeps landscape phones classified as phone. */
@media (max-width: 639px) {
  :root { --edge-page-gutter: 16px; }

  input, textarea, select {
    font-size: 16px !important;
  }

  .ema-hero {
    justify-content: center;
    padding-top: max(84px, calc(64px + var(--edge-safe-top)));
    padding-left: max(16px, var(--edge-safe-left));
    padding-right: max(16px, var(--edge-safe-right));
  }

  .ema-hero__logo { width: min(72vw, 260px); }
  .ema-hero__brand { letter-spacing: .22em; }

  .edge-journal,
  .gamer-home,
  .posts-index,
  .tools-index,
  .photo-cleaner {
    padding-left: max(16px, var(--edge-safe-left));
    padding-right: max(16px, var(--edge-safe-right));
  }

  .ej-intro-grid,
  .ej-lead,
  .ej-grid,
  .ej-categories,
  .ej-lab,
  .g-hud,
  .g-grid,
  .g-cats,
  .posts-card-grid,
  .tools-card-grid,
  .tool-workspace,
  .tool-workspace--unified,
  .tool-hero-grid,
  .tool-howto,
  .tool-download-bar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ej-card {
    grid-template-columns: 1fr !important;
  }

  .ej-card-art { min-height: 180px; }
  .posts-card { min-height: 0; }
  .tools-card { min-height: 0; }

  .ej-eyebrow,
  .ej-meta,
  .posts-card-top,
  .tools-index-heading,
  .tool-panel-heading,
  .queue-toolbar {
    flex-wrap: wrap;
  }

  .article-page main.main {
    width: 100%;
    padding-left: max(16px, var(--edge-safe-left)) !important;
    padding-right: max(16px, var(--edge-safe-right)) !important;
  }

  .article-page .article-title {
    max-width: 100% !important;
    font-size: clamp(2rem, 10.5vw, 3rem) !important;
  }

  .article-page .article-content {
    font-size: 1.02rem !important;
    line-height: 1.7 !important;
  }

  .article-page .article-content table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .newsletter-form { align-items: stretch; }
  .newsletter-submit { width: 100%; }
}

/* TABLET — dedicated layout, not a stretched phone or compressed desktop. */
@media (min-width: 640px) and (max-width: 1023px) {
  :root { --edge-page-gutter: clamp(22px, 4vw, 38px); }

  .edge-journal,
  .gamer-home,
  .posts-index,
  .tools-index,
  .photo-cleaner {
    width: 100%;
  }

  .ej-intro-grid,
  .ej-lead,
  .tool-hero-grid,
  .tool-workspace,
  .tool-workspace--unified,
  .tool-download-bar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ej-grid,
  .g-grid,
  .posts-card-grid,
  .tools-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ej-categories,
  .g-cats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .tool-howto ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.edge-journal-page .ej-intro,
  body.posts-index-page .left-sidebar,
  body.tools-index-page .left-sidebar,
  body.article-page .left-sidebar,
  body.tool-page .left-sidebar {
    max-height: none;
  }

  /* Collapse the heavy desktop dock on touch-tablet widths. */
  body.edge-journal-page .left-sidebar,
  body.posts-index-page .left-sidebar,
  body.tools-index-page .left-sidebar,
  body.article-page .left-sidebar,
  body.tool-page .left-sidebar {
    top: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: max(10px, var(--edge-safe-top)) max(10px, var(--edge-safe-right)) 10px max(10px, var(--edge-safe-left)) !important;
    padding: 12px 16px !important;
    overflow: visible !important;
  }
}

/* WIDE DESKTOP */
@media (min-width: 1440px) {
  :root { --edge-content-max: 1320px; }

  .edge-journal,
  .posts-index,
  .tools-index,
  .photo-cleaner {
    max-width: 1320px;
  }
}

/* Very short screens, including landscape phones. */
@media (max-height: 520px) and (orientation: landscape) {
  .ema-hero {
    min-height: 100dvh;
    padding-top: max(44px, var(--edge-safe-top));
    padding-bottom: max(30px, var(--edge-safe-bottom));
  }

  .ema-hero__logo { width: min(34vw, 210px); }

  html[data-device="phone"] .left-sidebar {
    position: static !important;
    width: auto !important;
    height: auto !important;
  }
}

/* JS-enhanced classification keeps landscape phones and touch tablets sane. */
html[data-device="phone"] body {
  --edge-page-gutter: 16px;
}

html[data-device="phone"] .edge-journal,
html[data-device="phone"] .posts-index,
html[data-device="phone"] .tools-index,
html[data-device="phone"] .photo-cleaner {
  max-width: 100%;
}

html[data-device="tablet"] .edge-journal,
html[data-device="tablet"] .posts-index,
html[data-device="tablet"] .tools-index,
html[data-device="tablet"] .photo-cleaner {
  max-width: 100%;
}

html[data-touch="true"] {
  -webkit-tap-highlight-color: rgba(126, 162, 255, .12);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}