﻿html,
body {
  max-width: 100%;
  overflow-x: clip !important;
}

main,
.site-shell,
section {
  min-width: 0;
  max-width: 100%;
}

/* Keep the stacked category papers inside the viewport */
[class*="paper"][class*="stack"],
[class*="stack"][class*="paper"],
[class*="collection"][class*="stack"],
[class*="category"][class*="stack"] {
  width: min(48rem, calc(100vw - 3rem)) !important;
  max-width: calc(100vw - 3rem) !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

/* Individual papers must never be wider than their stack */
[class*="paper"][class*="sheet"],
[class*="paper"][class*="card"],
[class*="collection"][class*="paper"],
[class*="category"][class*="paper"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  transform-origin: center center !important;
}

/* Desktop: retain the layered-paper appearance but keep it safe */
@media (min-width: 768px) {
  [class*="paper"][class*="sheet"],
  [class*="paper"][class*="card"],
  [class*="collection"][class*="paper"],
  [class*="category"][class*="paper"] {
    scale: 0.96;
  }
}

/* Phones: make the stack substantially safer */
@media (max-width: 767px) {
  [class*="paper"][class*="stack"],
  [class*="stack"][class*="paper"],
  [class*="collection"][class*="stack"],
  [class*="category"][class*="stack"] {
    width: calc(100vw - 1.5rem) !important;
    max-width: calc(100vw - 1.5rem) !important;
  }

  [class*="paper"][class*="sheet"],
  [class*="paper"][class*="card"],
  [class*="collection"][class*="paper"],
  [class*="category"][class*="paper"] {
    scale: 0.91;
  }
}
