/* Responsive data presentation and overflow safeguards. */
html{max-width:100%;overflow-x:hidden}
body{max-width:100%}
img,svg,canvas,video{max-width:100%}
.shell,.shell>*{min-width:0}
.hero>*,.page-head>*,.detail-title>*,.section-head>*,.activity-card>*,.segment-card>*,.record-card>*,.table-row>*,.ranking-row>*{min-width:0}
.page-head p,.section-head p,.detail-title p,.activity-card small,.record-card small,.table-row small,.ranking-row small{overflow-wrap:anywhere}
.metrics{min-width:0;flex-wrap:wrap;gap:8px 16px}
.metrics span{white-space:nowrap}
.detail-stats{grid-template-columns:repeat(auto-fit,minmax(min(145px,100%),1fr))}
.detail-stats div{min-width:0}
.detail-stats b{display:block;line-height:1.25;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.record-grid,.stat-grid,.route-grid,.segment-grid,.badge-grid,.activity-chart-grid,.segment-charts,.statistics-charts{min-width:0}
.record-card strong,.segment-card strong{max-width:42%;text-align:right;white-space:normal;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.chart-card,.chart-wrap,.fitness-card{min-width:0;overflow:hidden}
.chart-title{align-items:flex-start;gap:12px;flex-wrap:wrap}
.chart-title b{font-size:14px;line-height:1.3}
.chart-title span{text-align:right;line-height:1.3}
.chart-card canvas,.chart-wrap canvas,.dashboard-chart canvas,.segment-charts canvas,.statistics-charts canvas{display:block;width:100%!important;max-width:100%;height:220px!important;min-height:220px!important}
.statistics-charts{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));overflow:visible}
.statistics-charts .chart-card{height:auto;min-height:280px}
.statistics-charts .chart-card canvas{height:220px!important;max-height:220px!important}
.fitness-chart{min-width:0}
.fitness-chart svg{overflow:visible}
.fitness-legend{flex-wrap:wrap;gap:8px 16px}
.bar-chart,.line-bars{max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scrollbar-width:thin}
.bar-chart .bar-item{flex:1 0 22px}
.line-bars>div{flex:0 0 34px}
.activity-calendar{grid-template-columns:repeat(20,minmax(0,1fr));max-width:100%;overflow:hidden}
.table-row,.ranking-row{min-width:0}
.table-row>span,.ranking-row>span{max-width:45%;text-align:right;white-space:normal;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.goal-form>*{min-width:0}
.goal-form select{flex:1 1 145px;max-width:100%}
.goal-form input{flex:1 1 90px;width:auto;max-width:150px}
.compare-card,.compare-result{min-width:0;max-width:100%}
.compare-head,.compare-row{grid-template-columns:minmax(54px,.7fr) repeat(2,minmax(72px,1fr)) minmax(72px,.8fr)}
.compare-head>*{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compare-row>*{min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.share-cards,.video-options,.studio-checks,.choice-row,.notes-grid,.import-fields,.sport-choice{min-width:0}
.share-cards button,.control-group,.studio-status,.notes-card,.import-form{min-width:0}
.control-group input,.control-group select,.notes-grid input,.notes-grid select,.import-fields input{max-width:100%;min-width:0}
dialog{max-width:calc(100vw - 24px);max-height:calc(100svh - 24px);overflow:auto}
.guest .shell{padding-bottom:calc(92px + env(safe-area-inset-bottom))}

@media(max-width:560px){
  .shell{padding-inline:14px}
  .hero,.detail-title,.section-head,.activities-head,.video-studio-head{align-items:flex-start;gap:12px}
  .hero h1,.page-head h1,.detail-title h1{font-size:clamp(30px,10vw,42px);letter-spacing:-1.5px;overflow-wrap:anywhere}
  .section-head{margin-top:28px}
  .section-head h2{font-size:22px}
  .stat,.record-grid article{min-height:96px;padding:14px}
  .stat strong,.record-grid b{font-size:clamp(20px,6vw,26px)}
  .activity-card{align-items:flex-start}
  .activity-main h3{margin-bottom:7px}
  .activity-card .metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  .activity-card .metrics span{white-space:normal}
  .detail-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .record-card{align-items:flex-start;padding:13px}
  .record-card>i{flex-basis:38px;height:38px}
  .record-card strong{max-width:38%;font-size:16px}
  .segment-card{align-items:flex-start;gap:12px;padding:15px}
  .segment-card h2{overflow-wrap:anywhere}
  .table-row,.ranking-row{align-items:flex-start;gap:8px;flex-direction:column}
  .table-row>span,.ranking-row>span{max-width:100%;text-align:left}
  .period-card>div{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .period-card b{font-size:clamp(17px,5.5vw,21px);overflow-wrap:anywhere}
  .period-card span{min-width:0}
  .chart-card,.chart-wrap,.fitness-card{padding:13px;border-radius:17px}
  .chart-card canvas,.chart-wrap canvas,.dashboard-chart canvas,.segment-charts canvas,.statistics-charts canvas{height:205px!important;min-height:205px!important}
  .statistics-charts .chart-card{min-height:260px}
  .statistics-charts .chart-card canvas{height:205px!important;max-height:205px!important}
  .fitness-chart svg{height:190px}
  .month-calendar{padding:7px}
  .calendar-weekdays,.calendar-days{gap:3px}
  .calendar-day{min-height:52px;padding:5px}
  .calendar-day a{justify-content:center;margin-top:4px}
  .calendar-day a span{display:none}
  .calendar-day a i{width:8px;height:8px}
  .goal-form{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .goal-form>*{width:100%!important;max-width:none!important}
  .goal-form .btn{grid-column:1/-1}
  .compare-selects{display:grid;grid-template-columns:1fr}
  .compare-selects label{min-width:0}
  .compare-head{display:none}
  .compare-row{grid-template-columns:minmax(52px,.6fr) repeat(2,minmax(0,1fr));gap:6px;padding:12px 4px}
  .compare-row strong{grid-column:2/-1;text-align:right;padding-top:6px;border-top:1px dashed var(--line)}
  .share-cards{grid-template-columns:1fr 1fr}
  .share-cards button{min-height:92px}
  .studio-status{flex-direction:column}
  .studio-status b{text-align:left}
  .video-stage{height:min(62svh,620px);border-radius:18px}
  .import-page-head{display:grid;grid-template-columns:auto minmax(0,1fr)}
}

@media(max-width:360px){
  .shell{padding-inline:11px}
  .share-cards,.video-options,.studio-checks{grid-template-columns:1fr}
  .period-card>div{grid-template-columns:1fr}
  .period-card span{padding:8px 0;border-bottom:1px solid var(--line)}
  .goal-form{grid-template-columns:1fr}
  .goal-form .btn{grid-column:auto}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}