/* ============================================================
   PSIA Website — MOBILE OVERRIDES
   Loaded AFTER styles.css. Desktop/tablet rendering is untouched;
   everything here lives behind phone-width media queries (or is
   a safe no-op on desktop). Goal: comfortable reading + tapping
   on a ~360–430px phone browser.
   ============================================================ */

/* ---- global touch niceties (safe on all sizes) ---- */
html{-webkit-text-size-adjust:100%}
a,button,.lk,.btn{-webkit-tap-highlight-color:transparent}
.tablecard,.mng-xl-prev,.stat-tabs .in,.mt-scroll{-webkit-overflow-scrolling:touch}

/* ============================================================
   ≤ 700px — phones & small phablets
   ============================================================ */
@media(max-width:700px){

  /* -- prevent iOS Safari auto-zoom on focus: inputs must be ≥16px -- */
  input,select,textarea{font-size:16px !important}

  /* -- comfortable tap targets -- */
  .btn{min-height:46px}
  .btn-sm{min-height:40px}
  .menu-btn{width:44px;height:44px}
  .mobnav a{padding:15px var(--pad);min-height:48px;display:flex;align-items:center}
  .mng-tab{padding:11px 16px}
  .stat-tab{padding:11px 15px}
  .poolfilt{padding:10px 4px}
  .regrow .x,.depthrow .x{padding:8px 10px}

  /* -- wide tables scroll sideways instead of crushing columns -- */
  .tablecard,.mng-xl-prev{overflow-x:auto}
  .tablecard table.data th,.tablecard table.data td{padding:11px 12px;white-space:nowrap}

  /* -- hero: use small-viewport units so height doesn't jump with the URL bar -- */
  @supports(height:1svh){
    .hero{height:clamp(520px,86svh,700px)}
    .hero.hero-matches,.hero.hero-stats{height:clamp(400px,54svh,500px)}
  }

  /* -- sticky save bars clear the iPhone home indicator -- */
  .mng-savebar{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .mc-savebar{padding-bottom:calc(13px + env(safe-area-inset-bottom))}
  .mobnav{padding-bottom:env(safe-area-inset-bottom)}

  /* -- page transitions: swap the 3D cube for a light fade (GPU-cheap) -- */
  ::view-transition-old(psia-view){animation:vt-m-out 180ms ease both !important}
  ::view-transition-new(psia-view){animation:vt-m-in 200ms ease both !important}
}
@keyframes vt-m-out{from{opacity:1}to{opacity:0}}
@keyframes vt-m-in{from{opacity:0}to{opacity:1}}

/* ============================================================
   ≤ 480px — the phone layer proper
   ============================================================ */
@media(max-width:480px){

  /* ---------- header: fits a 360px screen without wrapping ---------- */
  .hdr-bar{height:60px;gap:8px}
  .brand{gap:8px;min-width:0}
  .brand-logo{height:32px}
  .brand .word{font-size:15px;letter-spacing:.1em;white-space:nowrap}
  .hdr-right{gap:8px}
  .signin{padding:8px 13px;font-size:12.5px}
  /* "Manage" stays reachable from the burger menu; hide the ghost button */
  .hdr-right .signin-ghost{display:none}
  /* signed-in chip can hold long names — clamp it */
  .acct-btn{max-width:132px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;line-height:1.6}
  .scorebug{display:none !important}

  /* ---------- global rhythm: tighter sections, calmer headings ---------- */
  .sec{padding-top:38px}
  .sec.last{padding-bottom:44px}
  .page-head{padding-top:30px}
  .page-head h1{font-size:29px}
  .shead{flex-wrap:wrap;row-gap:8px}
  .site-footer{margin-top:38px}
  .foot-inner{padding:32px var(--pad) 24px}

  /* ---------- hero ---------- */
  .hero-h1{font-size:33px !important;line-height:.98}
  .hero-sub{font-size:14.5px;max-width:100%}
  .hero-eyebrow{font-size:11px}
  .lower-third{bottom:30px}
  .hero-cta{flex-direction:column;align-items:stretch;margin-top:20px}
  .hero-cta .btn{width:100%}
  .hero-matches .hero-h1,.hero.hero-stats .hero-h1{font-size:33px !important}

  /* ---------- home: stats / fixture / results / kas ---------- */
  .statbar{grid-template-columns:1fr 1fr}
  .stat-cell{padding:18px 18px}
  .stat-num{font-size:30px}
  .fx-left,.fx-right{padding:20px 18px}
  .fx-team{font-size:28px}
  .fx-teams{gap:14px;margin-top:16px}
  .fx-count .n{font-size:32px}
  .rscore{font-size:28px}
  .panel-body{padding:6px 16px 14px}
  .kas-main{padding:20px 18px}
  .kas-cell{padding:16px 18px}

  /* ---------- join band ---------- */
  .join{padding:38px 20px;border-radius:16px}
  .join h2{font-size:29px}
  .join p{font-size:14.5px}
  .join-cta{flex-direction:column;align-items:stretch}
  .join-cta .btn{width:100%}

  /* ---------- matches: next-fixture spotlight ---------- */
  .spot-meta{padding:14px 18px}
  .spot-matchup{flex-wrap:wrap;gap:10px;padding:24px 16px 20px}
  .spot-side{flex:1 1 40%;gap:10px}
  .spot-team{font-size:21px;overflow-wrap:break-word}
  .spot-crest{height:40px}
  .spot-badge{height:40px;width:40px;font-size:14px}
  .spot-role{font-size:9px;letter-spacing:.14em}
  .spot-center{order:3;flex-basis:100%;margin-top:14px;padding-top:16px;border-top:1px solid #1F2A41}
  .cd-n{font-size:21px}
  .spot-cta{padding:16px 18px;gap:14px}
  .spot-spots{flex-wrap:wrap;row-gap:2px}
  .spot-spots .n{font-size:26px}
  .spot-cta .btn{width:100%}

  /* ---------- matches: upcoming + results ---------- */
  .upc-row{padding:15px 15px;gap:12px 14px;grid-template-columns:74px 1fr}
  .upc-cal .d2{font-size:19px}
  .upc-team{font-size:16px;overflow-wrap:break-word}
  .rt-row{padding:14px 16px;gap:12px}
  .rt-sc{font-size:20px}
  .int-row{padding:13px 15px;gap:12px}

  /* ---------- forms (register / account / manage) ---------- */
  .fld{min-width:0}
  .reg-form{padding:16px;gap:15px}
  .reg-actions{flex-direction:column;align-items:stretch}
  .reg-actions .btn{width:100%}
  .poschips{gap:8px}
  .poschip{padding:11px 12px}
  .gate{padding:26px 18px}
  /* payments toolbar: full-width match selector */
  #paySel{min-width:0 !important;width:100%}
  #payReload{margin-left:0 !important}

  /* ---------- stats page ---------- */
  /* the stats poschip is the small mono chip, not the register-page card */
  .pod3-chips .poschip,.sl-name .poschip{padding:3px 9px}

  /* ---------- tactical board / squad ---------- */
  .board-toolbar{gap:10px}
  .tb-left,.tb-right{width:100%}
  .tb-right{justify-content:flex-start}
  .pool{padding:12px}
  .matchsum{padding:20px 18px}

  /* ---------- manage (classic cards + admin console) ---------- */
  .mng-card{padding:16px;margin-bottom:70px}
  .mng-rrow{padding:13px}
  /* editor field grids (upcoming / internal games / results): one field per
     line — two ~140px columns squeeze labels into multi-line wraps and leave
     the input boxes misaligned on a phone */
  .mng-rgrid{grid-template-columns:1fr;gap:11px}
  /* top-performers editor: tighter columns so one row still fits */
  .mng-perfrow{grid-template-columns:26px minmax(0,1fr) 92px 48px;gap:8px}
  /* record-result panel: the two score boxes share a line, the rest go full
     width; actions stack so both buttons stay tappable */
  .mng-recgrid{grid-template-columns:1fr 1fr;gap:11px}
  .mng-recgrid label:nth-child(n+3){grid-column:1/-1}
  .mng-record{margin-left:8px}
  .mng-recactions{flex-direction:column-reverse}
  .mng-recactions .btn{width:100%}
  .mc-center-scroll{padding:16px 13px}
  .mc-title{font-size:20px}
  .mc-topbar{padding:9px 12px}
  .mc-wordmark{font-size:15px;letter-spacing:.08em}
  .mc-modal-pad{padding:20px 18px}
  .mc-modal-title{font-size:19px}

  /* ---------- account page ---------- */
  .acct-wrap{padding:18px 14px 44px}
  .acct-hero{padding:24px 18px 20px;gap:16px}
  .acct-hero h1{font-size:31px}
  .acct-hero-sub{font-size:14px}
  .acct-col{padding:22px 18px}

  /* ---------- long names never push the layout sideways ---------- */
  .sl-name .nm,.pod3-name,.regrow .rn,.pc-name,.upc-sub,.lc-title{overflow-wrap:break-word}
}

/* ============================================================
   ≤ 360px — very narrow phones: last resort trims
   ============================================================ */
@media(max-width:360px){
  :root{--pad:14px}
  .brand .word{display:none}
  .hero-h1{font-size:29px !important}
  .fx-team{font-size:24px}
  .spot-team{font-size:18px}
  .stat-num{font-size:26px}
  /* spotlight CTA: the fill block may shrink below its desktop minimum */
  .spot-fill{min-width:0}
  /* internal standings: tighter columns so the PTS column never clips */
  .int-strow{grid-template-columns:22px minmax(0,1fr) 24px 24px 24px 24px 40px;gap:4px;padding:10px 12px;font-size:12.5px}
  .int-stname{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
}

/* ---- Matchday Squad page + entry buttons (squad-status.js) ---- */
@media(max-width:700px){
  .upc-actions{flex-direction:row}
  .upc-actions .upc-reg,.upc-actions .upc-squad{flex:1;padding-left:8px;padding-right:8px}
  .spot-btns{width:100%}
  .spot-btns .btn{flex:1}
  /* Readiness hero: tighten padding and the countdown/live column on phones. */
  .sqs-hero{padding:15px 14px}
  .sqs-hero-r{gap:6px}
  .sqs-vs{font-size:18px}
  .sqs-tile b{font-size:19px}
  /* On a crowded matchday row (name + status chip + unpaid dot + admin ✕),
     give the name a floor and let the chip/dot/action wrap to a second line
     instead of clipping the name — exactly the rows an admin reads on the day. */
  .sqs-rowmain{flex-wrap:wrap;row-gap:6px}
  .sqs-info{min-width:120px}
}