/* Desktop density at native browser zoom. Keep mobile and print unchanged.
   Use real layout dimensions rather than CSS zoom/transform, so menus,
   sticky navigation, focus rings and dialogs keep their normal coordinates. */
@media screen and (min-width: 768px) {
  body {
    font-size: calc(13.5px * var(--font-scale, 1));
  }

  .shell-top {
    --page-pad: 22px;
    --card-pad-x: 18px;
    --card-pad-y: 14px;
    --stat-pad-y: 14px;
  }
  body[data-density="compact"] .shell-top {
    --page-pad: 20px;
    --card-pad-x: 16px;
    --card-pad-y: 12px;
    --stat-pad-y: 12px;
  }
  body[data-density="comfy"] .shell-top {
    --page-pad: 30px;
    --card-pad-x: 24px;
    --card-pad-y: 18px;
    --stat-pad-y: 18px;
  }

  .tn-top { padding: 8px 22px; gap: 12px; }
  .tn-brand { gap: 10px; }
  .tn-brand-mark { width: 112px; }
  .tn-title { font-size: 13px; }
  .tn-actions { gap: 10px; }
  .tn-nav button { padding: 9px 12px; font-size: 12.5px; }
  .page-head { margin-bottom: 20px; gap: 14px; }
  .page-head h1 { font-size: 24px; }
  .page-head .lede { font-size: 13px; }
  .card-title { font-size: 15px; }
  .btn { font-size: 12.5px; padding: 7px 13px; }
  .btn-sm { font-size: 12px; padding: 5px 10px; }
  .btn-block { padding: 10px 14px; font-size: 13px; }
  .org-tabs { margin-bottom: 18px; }
  .org-tab { padding: 8px 13px; font-size: 12.5px; }
  .stat-row { gap: 12px; margin-bottom: 18px; }
  .stat-top { margin-bottom: 10px; }
  .stat .stat-value { font-size: 26px; }
  .quarter-reminder { padding: 12px 16px; gap: 12px; margin-bottom: 18px; }

  /* Summary cards should stay compact without shrinking their text or controls. */
  .pp-row-grid, .init-grid { gap: 12px; }
  .pp-card { padding: 14px 16px; }
  .pp-top { margin-bottom: 10px; }
  .pp-counters { gap: 10px; margin-top: 10px; flex-wrap: wrap; }
  .init-card { padding: 16px 18px; gap: 8px; }
  .ic-foot { padding-top: 8px; margin-top: 2px; }

  .destination-main { padding: 46px 28px 52px; }
  .destination-intro { margin-bottom: 28px; }
  .destination-welcome { margin-top: 20px; font-size: 14px; }
  .destination-intro h1, .players-coming h1 {
    font-size: clamp(32px, 3.5vw, 46px);
  }
  .destination-lede { font-size: 14px; margin-top: 14px; }
  .destination-card { min-height: 240px; padding: 24px; }
  .destination-card-icon { width: 46px; height: 46px; }
  .destination-card-copy { padding-block: 20px; }
  .destination-card-copy h2 { font-size: 24px; }
}

/* The base sheet stacks these cards below 1100px. At tablet/laptop preview
   widths two readable columns fit; retain the existing single column on phones. */
@media screen and (min-width: 768px) and (max-width: 1100px) {
  .pp-row-grid, .init-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Wide data belongs in its own keyboard-accessible scroller, not in the
   document's overflow. Preserve column/text sizes and normal print layout. */
@media screen {
  .heatmap-q, .exec-table-scroll { max-width: 100%; overflow-x: auto; }
  .heatmap-q:focus-visible, .exec-table-scroll:focus-visible {
    outline: 2px solid var(--primary); outline-offset: -2px;
  }
}