/* Large and very large screens: 24 to 32 inch monitors and 4K. Loaded after every other sheet.
   The type tokens are rem, so raising the root size scales every heading and body size together; the pieces sized
   in px elsewhere (shell, icons, controls, spacing) are restated in rem here so the whole page grows with the type
   instead of a laptop-sized layout floating in empty space. Breakpoints are viewport widths in CSS px:
   1920 (24 to 27 inch at 100%), 2400 (27 to 32 inch QHD, or 4K at 150%), 2880 (4K at 125%), 3400 (4K at 100%). */

@media (min-width: 1920px) {
  html { font-size: 106.25%; }   /* 17px */
  :root { --k-top-bar: 4rem; --k-rail: 5.5rem; --k-touch: 2.75rem; --k-field-h: 3rem; }

  .page { max-width: 100rem; padding: 2rem 3rem 3rem; }
  .page--narrow { max-width: 46rem; }
  .topbar { padding-inline: 3rem; gap: .75rem; }
  .page-head { margin-block: .5rem 1.25rem; }
  .footer, .banner--flat { padding-inline: 3rem; }

  .ico { width: 1.5rem; height: 1.5rem; }
  .ico--sm { width: 1rem; height: 1rem; }
  .icon-btn { width: 2.75rem; height: 2.75rem; }
  .btn, .btn--sm { min-height: 2.75rem; padding-inline: 1.25rem; }
  .btn .ico, .menu-pop .ico, .banner > .ico, .limits > .ico, .page-btn .ico { width: 1.25rem; height: 1.25rem; }
  .input, select.input { padding-inline: .875rem; }
  .pw .input, .pw input { padding-right: 3.25rem; }
  .chip { min-height: 1.75rem; padding: 0 .625rem; }
  .chip .ico { width: 1rem; height: 1rem; }
  button.chip, a.chip.is-filter { min-height: 2.75rem; }
  .page-btn { min-width: 2.75rem; height: 2.75rem; }
  .tabs a { min-height: 2.75rem; }
  .tile-icon { width: 2rem; height: 2rem; }
  .tile-icon--lg { width: 2.5rem; height: 2.5rem; }
  .tile-icon--xl { width: 4.5rem; height: 4.5rem; }

  .rail-in { padding: 0 0 .5rem; }
  .rail-in .tile-icon { width: 2.25rem; height: 2.25rem; }
  .nav a .pill { width: 3.5rem; }   /* the slot and the pill height are rem in base.css: they grow with the type */

  .bento { gap: 1.25rem; grid-auto-rows: minmax(6rem, auto); }
  .tile { padding: 1.5rem; gap: .5rem; }
  .tile--map { min-height: 14rem; }
  .card { padding: 1.25rem; }
  .card--parts { padding: 0; }
  .card-head, .card-foot { padding-inline: 1.25rem; }
  .card-body { padding: 1.25rem; }
  .card--flush > .card-body { padding: 0; }
  .tbl th, .tbl td { padding: .75rem 1rem; }
  .stack, .grid-2, .grid-3, .grid-aside, .record { gap: 1.25rem; }

  /* map page: panels and the search grow with the type */
  .shell--map .main { --map-top: 5rem; }
  .shell--map .main:has(.banners > .banner:not([hidden])) { --map-top: .75rem; }
  .shell--map .banners:has(> .banner:not([hidden])) { padding: 5rem .75rem .5rem; }
  .shell--map .topbar { top: .75rem; left: .75rem; right: .75rem; min-height: 3.5rem; padding: .375rem .75rem; }
  .chipbar { left: .75rem; gap: .5rem; }
  .mapsearch .ico { left: .75rem; top: .75rem; width: 1.25rem; height: 1.25rem; }
  .mapsearch { min-width: 10rem; max-width: 26rem; }
  .mapsearch input { min-height: 2.75rem; padding: 0 .875rem 0 2.625rem; }
  .panel--layers { right: .75rem; width: 21rem; }
  .panel--peek { bottom: 5.5rem; width: 24rem; }
  .panel--tool { width: 19rem; }
  .panel--legend { width: 18rem; }
  .panel header { padding: .5rem .5rem .5rem 1.25rem; }
  .panel .body { padding: 0 1.25rem 1.25rem; gap: 1rem; }
}

@media (min-width: 2400px) {
  html { font-size: 118.75%; }   /* 19px */
  .page { max-width: 108rem; }
}

@media (min-width: 2880px) {
  html { font-size: 137.5%; }    /* 22px: 4K at 125% scaling */
}

@media (min-width: 3400px) {
  html { font-size: 162.5%; }    /* 26px: 4K at 100% scaling */
}