/* Batch 6 mobile polish: tap targets, safe areas, aligned score tables, naturally flowing record lists. Loaded last. */
#app .cricket-table{table-layout:fixed;width:100%;font-variant-numeric:tabular-nums}
#app .cricket-table :is(th,td):not(:first-child){width:2.9em;text-align:right;white-space:nowrap}
#app .cricket-table :is(th,td):last-child{width:3.6em}
#app .cricket-table td:first-child{overflow:hidden}
#app .cricket-table td:first-child>strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
#app .cricket-table td:first-child>strong.is-full{white-space:normal;overflow:visible}
#app .cricket-table td:first-child>small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app .record-sections.compact{display:block;columns:2 300px;column-gap:28px}
#app .record-sections.compact>section{break-inside:avoid;display:inline-block;width:100%;margin:0 0 10px}
#app nav:has(>[data-action^="match-tab:"]),#app :has(>[data-career-tab]){overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#app nav:has(>[data-action^="match-tab:"])::-webkit-scrollbar,#app :has(>[data-career-tab])::-webkit-scrollbar{display:none}
#app [data-action^="match-tab:"],#app [data-career-tab]{min-width:44px;min-height:40px;flex:0 0 auto}
#app .watching-pill{height:40px}
#app .lp-row .lp-change,#app .lp-bowler-actions .lp-change{height:40px;min-height:40px}
#app [data-testid^="top3-"],#app [data-testid^="rankings-category-"],#app [data-testid^="rankings-format-"]{min-height:40px!important}
[data-testid=header-login-button],[data-testid=sign-out-button]{min-height:40px!important;height:auto!important}
.sheet-body{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
@media (max-width:760px){
 #app{padding-bottom:calc(96px + env(safe-area-inset-bottom))!important}
 body.is-live-scoring #app{padding-bottom:calc(24px + env(safe-area-inset-bottom))!important}
 #app .record-sections.compact{columns:1}
 #app .empty-state{padding:10px 0;margin:4px 0;min-height:0}
}
#app [data-testid=home-upcoming-all]{display:inline-flex;align-items:center;min-height:40px;padding:0 6px}
#app .cricket-table:has(th:nth-child(8)) :is(th,td):not(:first-child){width:2.3em}
#app .cricket-table:has(th:nth-child(8)) :is(th,td):nth-child(6){width:3.1em}
#app .cricket-table:has(th:nth-child(8)) :is(th,td):first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:360px){#app .cricket-table{font-size:12px}#app .cricket-table :is(th,td){padding-left:3px;padding-right:3px}}

/* Tab strips: horizontal scroll never blocks a tap; the whole tab is the target; loading state while content arrives. */
#app :is(.career-tabs,.club-tabs,.match-tabs,.cmp-tabs,.hr-tabs){touch-action:pan-x pan-y;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0}
#app :is(.career-tabs,.club-tabs,.match-tabs,.cmp-tabs,.hr-tabs) button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
#app :is(.career-tabs,.club-tabs,.match-tabs,.cmp-tabs,.hr-tabs) button *{pointer-events:none}
#app .tab-loading{margin:0 0 12px;font-size:13px;opacity:.75}
#app .tab-loading::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-1px;animation:tab-spin .7s linear infinite}
@keyframes tab-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#app .tab-loading::before{animation:none}}
#app .career-filters label{min-width:0}
#app .career-filters select{max-width:100%}

/* Swipe between tabs: one-time hint and a short fade (off with reduced motion). Opacity only, so nothing can widen the page. */
#app .swipe-hint{margin:-4px 0 10px;font-size:12px;opacity:.6;animation:swipe-hint-in .4s ease-out both}
@keyframes swipe-hint-in{from{opacity:0}to{opacity:.6}}
#app:is(.swipe-next,.swipe-prev) :is([data-match-panel]:not([hidden]),.career-tabs~*){animation:swipe-fade .22s ease-out}
@keyframes swipe-fade{from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion:reduce){#app:is(.swipe-next,.swipe-prev) *,#app .swipe-hint{animation:none!important}}
