/* ════ TABLET PORTRAIT (600–1023px) ════
   The phone layout keeps its bottom tab bar, but content uses the full
   width of the screen instead of a narrow phone-sized column: 24px side
   gutters, wider grids (3 vocabulary tiles, 3 podcast tiles, 2-column
   chapter lists) and roomier hero text. Desktop (1024px+) is unchanged.
   Loaded last, so it overrides the phone widths in the other files. */
@media (min-width:600px) and (max-width:1023px){
  :root{--tab-gutter:24px;}

  /* Tab pages: headers and lists */
  .page-header,.page-sub,.section-header,.page-actions,.listen-filter,.listen-empty,.page-empty{
    max-width:none;padding-left:var(--tab-gutter);padding-right:var(--tab-gutter);}
  .chapter-list{max-width:none;padding:0 var(--tab-gutter);display:grid;grid-template-columns:1fr 1fr;}
  .vocab-grid{max-width:none;padding:16px var(--tab-gutter) 24px;grid-template-columns:repeat(3,1fr);gap:14px;}
  .listen-grid{max-width:none;padding:16px var(--tab-gutter) 24px;grid-template-columns:repeat(3,1fr);gap:18px 14px;}

  /* Home */
  .home-hero,.home-quick,.home-why,.home-footer,.home-about{max-width:none;width:calc(100% - 2 * var(--tab-gutter));}
  .home-section{max-width:none;}
  .home-section-head{padding-left:var(--tab-gutter);padding-right:var(--tab-gutter);}
  .home-hero{padding:28px 30px 26px;}
  .home-hero h1{font-size:2.2rem;}
  .home-hero-text{font-size:.98rem;max-width:60ch;}
  .home-actions{max-width:420px;}
  .home-quick{grid-template-columns:repeat(4,minmax(0,120px));justify-content:space-between;}
  .home-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
  .home-row{scroll-padding:0 var(--tab-gutter);padding-left:var(--tab-gutter);padding-right:var(--tab-gutter);gap:14px;}
  .home-vocab{width:240px;}
  .home-row .listen-group-tile{width:170px;}
  .home-deck{width:190px;}

  /* Sproochentest page */
  .sx-feature,.sx-group-title,.sx-topics,.sx-help,.sx-tip{max-width:none;width:calc(100% - 2 * var(--tab-gutter));}
  .sx-topics{grid-template-columns:repeat(3,1fr);gap:12px;}
  .sxf{padding:26px 28px;}
  .sxf-title{font-size:1.7rem;}

  /* Push screens: Speaking / Listening / Picture, roadmap, lessons, practice */
  .sx-page-body,.rm-body,.ls-body{max-width:none;padding-left:var(--tab-gutter);padding-right:var(--tab-gutter);}
  .sx-grid.listen-grid{grid-template-columns:repeat(3,1fr);padding:0;}
  .sx-topics.rm-topics{width:auto;grid-template-columns:repeat(2,1fr);}
  .pd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start;}
  .pd-tools{display:grid;grid-template-columns:repeat(2,1fr);}
  .pr-cards{grid-template-columns:repeat(2,1fr);align-items:start;}

  /* Vocabulary chapter and Speaking topic screens (inline 480px column) */
  :is(#studyDetailScreen,#sproochDetailScreen) .push-screen-scroll > div:last-child{
    max-width:none !important;padding:16px var(--tab-gutter) 32px !important;}

  /* Podcast player, flashcard game, progress and profile */
  .pod-inner{max-width:720px;padding-left:var(--tab-gutter);padding-right:var(--tab-gutter);}
  .game-inner{max-width:640px;}
  .progress-page,.settings-page{max-width:none;padding-left:var(--tab-gutter);padding-right:var(--tab-gutter);}

  /* Floating bars stay a comfortable size instead of stretching edge to edge */
  .tabbar{width:min(90%,640px);}
  .install-banner{left:50%;right:auto;width:min(560px,calc(100% - 2 * var(--tab-gutter)));transform:translate(-50%,16px);}
  .install-banner.in{transform:translate(-50%,0);}
}