/* Empire Five · resources slice, wave 3: responsive pass for 320 to 1920.
   Guides, guide, FAQ, size charts, downloads, legal, NDA, 404, fallback. All selectors res-* or slice-template scoped. */

/* ---------- sticky side panels never run past the viewport ---------- */
/* A tall contents list plus the terms card can be taller than a 720px laptop screen; let the panel scroll on its own. */
@media (min-width: 901px) {
  .res-aside { max-height: calc(100vh - var(--head-h) - 40px); max-height: calc(100dvh - var(--head-h) - 40px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 2px; margin: -2px; }
}
@media (min-width: 861px) {
  .res-faq-side, .res-legal-toc { max-height: calc(100vh - var(--head-h) - 40px); max-height: calc(100dvh - var(--head-h) - 40px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}

/* ---------- desktop and wide (1280 to 1920) ---------- */
@media (min-width: 1440px) {
  .res-prose { font-size: 1.1rem; }
  .res-rail dd { font-size: 1.02rem; }
}
/* Long lines stay readable on wide screens: hero lede and caveats cap at a comfortable measure. */
.res-hero .lede { max-width: 62ch; }
.res-guide-lede { max-width: 68ch; }

/* ---------- small laptops and landscape tablets (901 to 1100) ---------- */
@media (min-width: 901px) and (max-width: 1100px) {
  .res-article-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: 32px; }
  .res-aside .card { padding: 16px; }
  .res-legal { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 32px; }
  .res-files { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .res-faq-page { grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 28px; }
}
/* The nowrap chip bar must not widen the single-column FAQ grid on phones (it pushed search and questions off screen). */
.res-faq-page > * { min-width: 0; }
@media (max-width: 860px) {
  .res-faq-page, .res-legal { grid-template-columns: minmax(0, 1fr); }
  .res-faq-side, .res-faq-side .faq-toc { max-width: 100%; }
}
.res-article-grid > *, .res-legal > * { min-width: 0; }
@media (max-width: 900px) {
  .res-article-grid { grid-template-columns: minmax(0, 1fr); }
  .res-aside { max-width: none; }
  /* The fixed Contents pill floats over the article; leave room so the last lines can scroll clear of it. */
  .res-article-grid { padding-bottom: 72px; }
}
@media (max-width: 600px) { .res-aside { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .res-faq-tools { grid-template-columns: minmax(0, 1fr); } }

/* FAQ section chips scroll sideways below 861px: fade the right edge so the cut-off chip reads as "more", with end padding so the last chip scrolls clear of the fade. */
@media (max-width: 860px) {
  .res-faq-side .faq-toc { padding-right: 36px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
}

/* ---------- portrait tablets (601 to 900): terms card uses the full width ---------- */
@media (min-width: 601px) and (max-width: 900px) {
  .res-terms { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 240px); column-gap: 28px; align-items: start; }
  .res-terms > .res-label { grid-column: 1 / -1; }
  .res-terms > dl { grid-column: 1; grid-row: 2 / span 2; margin: 0; }
  .res-terms > .btn { grid-column: 2; grid-row: 2; }
  .res-terms > .text-link { grid-column: 2; grid-row: 3; justify-self: center; }
  .res-measure li { padding-bottom: 18px; }
}

/* ---------- touch: 44px targets on the remaining controls ---------- */
@media (pointer: coarse) {
  .res-terms .text-link { min-height: 44px; display: inline-flex; align-items: center; }
  .res-units button { min-height: 44px; }
  .res-faq-tools .btn, .res-faq-tools input { min-height: 48px; }
  .res-sheet-body a { min-height: 52px; }
}
.res-sizes .tiers-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* ---------- phones (up to 600): 16px reading copy, full-width actions ---------- */
@media (max-width: 600px) {
  .res-guide-lede, .res-quick dd, .res-measure p, .res-route-t, .res-tool-text, .res-file p,
  .res-list li, .res-after, .res-related a, .res-nda-steps li, .res-sheet-body a { font-size: 1rem; }
  .res-terms dl > div { font-size: .94rem; }
  .res-toc li a { font-size: .94rem; }
  .res-rail dt { font-size: .7rem; }
  .res-prose { font-size: 1rem; line-height: 1.68; }
  .res-prose h2 { font-size: 1.3rem; }
  .res-list { padding: 10px 14px; }
  .res-terms .btn { min-height: 48px; }
  .res-terms .text-link { width: 100%; justify-content: center; }
  .res-file .btn { width: 100%; justify-content: center; min-height: 48px; }
  .res-faq-tools .btn { justify-self: stretch; width: 100%; justify-content: center; }
  .res-faq-group .group-h { font-size: 1.25rem; }
  .res-faq-main .faq summary { padding: 14px 14px; font-size: 1rem; }
  .res-faq-main .faq-a { font-size: 1rem; }
  .res-legal .res-clauses h2 { font-size: 1.12rem; }
  .res-routes a { padding: 18px 16px; }
  .res-404-sports .chip-row { gap: 8px; }
}
/* Size tools stack into a one-column grid at 520px and below; keep the unit toggle at its own width instead of a stretched empty pill. */
@media (max-width: 520px) { .res-size-tools > .res-units { justify-self: start; } }
/* Fallback pages: user content (tables, wide media) never pushes the page sideways. */
.res-index .res-prose img, .res-index .res-prose video, .res-index .res-prose iframe { max-width: 100%; height: auto; }
.res-index .res-prose table { display: block; max-width: 100%; overflow-x: auto; }
.res-index .res-prose pre { max-width: 100%; overflow-x: auto; }

/* ---------- small phones (up to 380): 320, 360, 375 ---------- */
@media (max-width: 380px) {
  .res-rail > div { padding: 10px 10px 12px; }
  .res-rail dd { font-size: .9rem; }
  .res-quick > div { padding: 12px 12px 14px; }
  .res-nda-steps { grid-template-columns: 1fr; }
  .res-guide-row { grid-template-columns: 30px minmax(0, 1fr); gap: 4px 10px; }
  .res-finder-row { flex-wrap: wrap; }
  .res-finder-row input { flex: 1 1 120px; }
  .res-finder-row .btn { flex: 1 1 100%; justify-content: center; }
  .res-sec > h2, .res-clause > h2 { padding-right: 44px; }
  .res-pill { padding: 0 14px; }
}

/* ---------- long tokens (emails, URLs) wrap inside narrow columns ---------- */
.res-hero .lede, .res-after, .res-faq-empty, .res-clauses .hint, .res-nda-steps li, .nda-doc p { overflow-wrap: anywhere; }

@media print {
  .res-aside, .res-faq-side, .res-legal-toc { max-height: none !important; overflow: visible !important; }
}