/* ============================================================================
 * responsive.css — Tablet adaptive layer (768px – 1023px)
 * ----------------------------------------------------------------------------
 * ADDITIVE ONLY. Every rule is inside a min-width:768px media query, so at
 * <768px NOTHING here applies and the mobile UI is byte-identical to today.
 * Widening is scoped to the home screen via :has(#screenWIT.active) so the
 * data-dense screens keep their exact mobile column (cannot break).
 * ==========================================================================*/

@media (min-width: 768px) and (max-width: 1023px) {
  /* Slightly wider frame on the landing/home screen only */
  body:has(#screenWIT.active) { max-width: 720px !important; }
  body:has(#screenWIT.active) #globalStarCanvas { width: 100vw !important; }

  /* Home: more breathing room, 2-up feature cards */
  #screenWIT .wit-hero { padding: 30px 24px 14px !important; max-width: 620px; margin: 0 auto; }
  #screenWIT .wit-hero #witHeroTitle { font-size: clamp(22px, 3.2vw, 27px) !important; }

  #screenWIT .wit-cta,
  #screenWIT .wit-findbar { max-width: 560px; margin: 0 auto; }

  #screenWIT .wit-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 8px 20px !important;
    max-width: 620px;
    margin: 0 auto;
    align-items: stretch;
  }
}