/* v94 (DRAFT, not live): the Pro/Creator switch is never cut off on phones. Only the switch's own bar is touched:
   the page header (.top) at 431-500 px and <=359 px, and the Creator top bar (.creator .cr-top) at <=560 px.
   Desktop and every other part of the page are unchanged. */

/* 1) Page header, 431-500 px wide (e.g. iPhone Pro Max 440): the big wordmark + full switch did not fit (page was 481 px
   wide, switch showed "CREAT"). Use the same compact header the site already uses at <=430 px. */
@media (min-width:431px) and (max-width:500px){
  .top .brand-main,.top .brand-sub{font-size:18px;letter-spacing:.14em}
  .top .gm-mark{height:26px}
  .top .brand{gap:7px}
  .top .mode-tog button{padding:0 10px;letter-spacing:.12em}
}
/* Page header, <=359 px (e.g. 320): 17 px too wide before. Slightly slimmer switch + gap. */
@media (max-width:359px){
  .top{gap:8px}
  .top .mode-tog button{padding:0 7px;letter-spacing:.08em}
}

/* 2) Creator top bar: the switch used to shrink and clip its "Creator" button. It now keeps its full size and the
   bar's other buttons get slimmer instead (all keep their labels' aria text and >= 44 px tap height where they had it). */
@media (max-width:560px){
  .creator .cr-top .mode-tog{flex:0 0 auto}
  .creator .cr-top .mode-tog button{padding-left:8px;padding-right:8px;letter-spacing:.1em}
  .creator .cr-top{gap:4px}
  .creator .cr-topr{gap:4px;min-width:0}
}
@media (min-width:401px) and (max-width:480px){
  .creator .cr-exit{padding:0 10px 0 7px;gap:3px;font-size:11px;letter-spacing:.06em}
  .creator .cr-top{padding:0 8px}
  #crPl,.creator .cr-filt{padding:7px 8px;letter-spacing:.08em}
  .creator .cr-newclip{letter-spacing:.06em;padding:10px 2px;min-width:0}
}
@media (max-width:400px){
  .creator .cr-top .mode-tog button{padding-left:6px;padding-right:6px;letter-spacing:.06em}
  .creator .cr-filt,#crPl{padding:7px 6px;letter-spacing:.06em}
  .creator .cr-newclip{white-space:normal;line-height:1.15;text-align:center;padding:4px 0;letter-spacing:.04em}
}
@media (max-width:359px){
  .creator .cr-top{padding:0 4px;gap:3px}
  .creator .cr-topr{gap:2px}
  .creator .cr-exit{padding:0 6px;min-width:30px}
  .creator .cr-top .mode-tog button{padding-left:5px;padding-right:5px;letter-spacing:.04em;font-size:9.5px}
  .creator .cr-filt,#crPl{padding:7px 5px;font-size:10px;letter-spacing:.04em}
  #crPl .cr-pl-short{font-size:10px;letter-spacing:.04em}
  .creator .cr-newclip{font-size:10px}
}