/* Track Mechanics V38.81.175 — merged browser/responsiveness/layout-balance hardening.
   Includes the accepted V38.81.174 balance rules plus the second-pass whitespace/text separation layer.
   Loaded last. Presentation only: no data, sync, timing, Standards or report behavior. */

:root{
  --tm174-gap-1:6px;
  --tm174-gap-2:10px;
  --tm174-gap-3:14px;
  --tm174-gap-4:18px;
  --tm174-gap-5:24px;
  --tm174-control-min:48px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{overflow-x:hidden}

/* Universal shrink/wrap protection. */
:where(#app,.app-shell,.main-shell,#main,.page,.experience-page,main,section,article,aside,header,footer,nav,form,fieldset,details,summary,div,span,label){min-width:0}
:where(img,svg,video,canvas,iframe){max-width:100%;height:auto}
:where(h1,h2,h3,h4,p,li,dd,dt,label,small,strong,span,a,button,summary,th,td){overflow-wrap:anywhere;word-break:normal}
:where(input,select,textarea,button,.btn){max-width:100%;min-width:0;font:inherit}

/* Readable vertical rhythm without crowding dense screens. */
.page{gap:clamp(20px,2.2vw,30px)}
.page-heading{display:grid;gap:8px;margin-bottom:2px}
.page-heading h1{margin:0;line-height:1.08;max-width:24ch;text-wrap:balance}
.page-heading .lead{margin:0;max-width:72ch;line-height:1.6}
.section-head,.experience-section-heading,.tm-panel-head{gap:var(--tm174-gap-3)}
.section-head h2,.experience-section-heading h2,.tm-panel-head h2{line-height:1.2;text-wrap:balance}
.helper,.lead,.experience-status-note,small{line-height:1.5}

/* Status notes must never concatenate their label and value. */
.experience-status-note.result-persistence-note{
  display:flex!important;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:6px 10px;
  padding:14px 16px!important;
}
.experience-status-note.result-persistence-note strong{color:var(--text);flex:0 0 auto}
.experience-status-note.result-persistence-note span{flex:1 1 340px;min-width:0}

/* Timing hub: actual cards, not unstyled text buttons. */
.experience-section[aria-label="Timing options"]{padding:clamp(18px,2.4vw,28px)!important}
.experience-section[aria-label="Timing options"] .experience-action-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  margin-top:6px;
}
.action-row{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-height:92px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border:1px solid var(--border,#d9e0e7);
  border-radius:14px;
  background:var(--surface,#fff);
  color:var(--text,#132238);
  text-align:left;
  box-shadow:none;
}
.action-row:hover{background:var(--surface-muted,#f7f9fb);border-color:var(--border-strong,#b9c5d0)}
.action-row:focus-visible{outline:3px solid var(--action,#b63225);outline-offset:3px}
.action-row>span:first-child{display:grid;gap:5px;min-width:0}
.action-row strong{display:block;font-size:15px;line-height:1.25}
.action-row small{display:block;color:var(--text-muted,#596879);font-size:13px;line-height:1.45}
.action-row>span:last-child{font-size:18px;color:var(--text-muted,#596879);flex:0 0 auto}

/* Profile facts: labels, values and explanations always get their own line. */
.profile-band{
  align-items:stretch;
  grid-auto-flow:row;
}
.profile-band>div{
  min-width:0;
  display:grid;
  align-content:start;
  gap:6px;
  padding:18px!important;
}
.profile-band .eyebrow{margin:0;line-height:1.25}
.profile-band strong{display:block;line-height:1.35;font-size:clamp(17px,1.5vw,20px)!important;overflow-wrap:anywhere}
.profile-band span{display:block;margin:0;color:var(--text-muted,#596879);font-size:12px;line-height:1.45}
@media(min-width:1000px){
  .profile-band{grid-template-columns:minmax(110px,.72fr) minmax(250px,1.65fr) minmax(115px,.78fr) minmax(150px,1fr) minmax(120px,.8fr)!important}
}

/* Results filter layout: give every label/control enough width and breathing room. */
.results-filter-drawer .experience-filter-bar{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px 12px!important;
  align-items:end!important;
  padding:20px!important;
}
.results-filter-drawer .experience-filter-bar label{
  display:grid!important;
  grid-template-columns:minmax(0,1fr);
  gap:7px;
  min-width:0!important;
  font-size:12px;
  line-height:1.35;
}
.results-filter-drawer .experience-filter-bar label:first-child{grid-column:span 2}
.results-filter-drawer .experience-filter-bar input,
.results-filter-drawer .experience-filter-bar select{
  width:100%;
  min-height:var(--tm174-control-min);
  padding-inline:12px;
}
.results-filter-drawer .experience-filter-bar [data-results-reset]{min-height:var(--tm174-control-min);align-self:end}
.results-filter-drawer .experience-filter-bar [data-results-count]{grid-column:1/-1;margin:0;padding-top:2px}

/* Results overview cards remain useful without feeling like a wall of boxes. */
.results-command-center{padding:20px!important}
.results-overview-grid{gap:12px!important}
.results-overview-grid article{padding:16px!important;display:grid;gap:6px;align-content:start}
.results-overview-grid article strong{line-height:1.05}
.results-overview-grid article p,.results-overview-grid article span{line-height:1.45}
.results-overview-context{margin-top:14px!important;gap:10px!important}

/* Like-for-like statistics: fewer columns, more explanation room. */
.results-event-aggregate-section{padding:20px!important}
.results-event-aggregate-grid{gap:18px!important}
.results-event-aggregate{padding:20px!important;gap:18px!important}
.results-event-aggregate h3{font-size:1.15rem!important;line-height:1.25}
.results-event-metrics{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0 18px!important;
}
.results-event-metrics span{
  padding:12px 0!important;
  gap:5px!important;
  border-top:1px solid var(--border,#d9e0e7);
}
.results-event-metrics small{font-size:12px!important;line-height:1.35}
.results-event-metrics strong{font-size:15px!important;line-height:1.3}
.results-event-metrics em{font-size:12px!important;line-height:1.5!important;margin-top:2px!important}
.results-like-for-like-explainer{padding:16px 18px!important;margin-top:14px!important}
.results-like-for-like-explainer p{line-height:1.62!important;max-width:88ch}

/* Details/disclosures need consistent click targets and readable summaries. */
.tm-results-evidence-drawer>summary,.results-filter-drawer>summary,.experience-admin-details>summary{
  min-height:64px;
  gap:12px;
}
.tm-results-evidence-drawer>summary>span:first-child,.results-filter-drawer>summary>span:first-child{min-width:0;display:grid;gap:4px}
.tm-results-evidence-drawer>summary small,.results-filter-drawer>summary small{line-height:1.4}

/* General controls/buttons: balanced padding and wrapping. */
.btn,button:not(.nav-link):not(.appbar-icon):not(.tm-capture-shortcut){min-height:44px}
.btn{padding:10px 14px;line-height:1.25}
.actions{gap:10px!important}
label>input,label>select,label>textarea{margin-top:0}
input,select,textarea{line-height:1.3}
textarea{line-height:1.5}

/* Dense cards and rows get a little more space at desktop/tablet widths. */
:where(.experience-section,.tm-dashboard-panel,.tm-performance-chart-panel,.tm-current-set-card,.tm-capture-card,.evidence-panel){scroll-margin-top:88px}
:where(.result-row,.evidence-row,.experience-recent-row){column-gap:16px;row-gap:8px}

/* Responsive breakpoints chosen for content pressure, not device names. */
@media(max-width:1100px){
  .results-filter-drawer .experience-filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .results-filter-drawer .experience-filter-bar label:first-child{grid-column:1/-1}
  .profile-band{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .profile-band>div:nth-child(2){grid-column:1/-1}
}

@media(max-width:760px){
  .page{gap:20px}
  .page-heading{gap:7px}
  .page-heading h1{font-size:clamp(1.8rem,8vw,2.2rem)!important;max-width:100%}
  .experience-section[aria-label="Timing options"] .experience-action-grid{grid-template-columns:1fr!important}
  .action-row{min-height:84px;padding:15px 16px}
  .results-event-aggregate-section,.results-command-center{padding:16px!important}
  .results-event-aggregate{padding:16px!important}
  .results-like-for-like-explainer{padding:14px 15px!important}
  .profile-band{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .profile-band>div:nth-child(2){grid-column:1/-1}
}

@media(max-width:620px){
  .results-filter-drawer .experience-filter-bar{grid-template-columns:1fr!important;padding:16px!important;gap:14px!important}
  .results-filter-drawer .experience-filter-bar label:first-child{grid-column:auto}
  .results-filter-drawer .experience-filter-bar [data-results-count]{grid-column:auto}
  .results-filter-drawer .experience-filter-bar [data-results-reset]{width:100%}
  .results-event-metrics{grid-template-columns:1fr!important}
  .experience-status-note.result-persistence-note{display:grid!important;grid-template-columns:1fr;gap:4px}
  .profile-band{grid-template-columns:1fr!important}
  .profile-band>div:nth-child(2){grid-column:auto}
}

@media(max-width:380px){
  .action-row{grid-template-columns:minmax(0,1fr);gap:8px}
  .action-row>span:last-child{display:none}
  .btn{padding-inline:12px}
  .results-event-aggregate,.results-command-center,.results-event-aggregate-section{padding:14px!important}
}

/* Zoom/forced-colors/reduced-motion defensive behavior. */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
@media(forced-colors:active){.action-row,.results-event-aggregate,.results-like-for-like-explainer,.profile-band,.profile-band>div{forced-color-adjust:auto;border-color:CanvasText!important}}

/* Reusable semantic groups: never glue a value to its explanation. */
.experience-metrics>div,
.provenance-legend>div,
.empty-inline,
.auto-info>div,
.warning-banner,
.notice{
  min-width:0;
}
.experience-metrics>div{display:grid;align-content:start;gap:5px;padding:16px!important}
.experience-metrics>div>strong{display:block;line-height:1.25}
.experience-metrics>div>small,.experience-metrics>div>span{display:block;line-height:1.45}
.provenance-legend>div{display:grid;gap:5px}
.empty-inline{display:grid;gap:5px}
.warning-banner>strong,.notice>strong{display:block;margin-bottom:5px}
.warning-banner>span,.notice>span{display:block;line-height:1.5}
.support-boundary{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:5px!important}
.support-boundary>strong{display:block;line-height:1.3}
.support-boundary>strong:not(:first-child){margin-top:9px}
.support-boundary>span{display:block;line-height:1.5}

/* Buttons containing a title + explanation use deliberate internal rhythm. */
button>span:has(>strong):has(>small),
button>span:has(>strong):has(>span){min-width:0}
button>span:has(>strong)>strong{display:block;line-height:1.3}
button>span:has(>strong)>small,
button>span:has(>strong)>span{display:block;margin-top:4px;line-height:1.45}
/* V38.81.175 — whitespace, text separation and aggregate-trend hardening.
   Presentation only. Keeps dense legacy surfaces readable without changing data authority. */
:root{
  --tm175-space-1:6px;
  --tm175-space-2:10px;
  --tm175-space-3:14px;
  --tm175-space-4:18px;
  --tm175-space-5:24px;
  --tm175-space-6:30px;
  --tm175-radius:16px;
}

/* Global vertical rhythm. */
.page{gap:clamp(24px,2.4vw,34px)!important}
.page-heading{gap:10px!important;margin-bottom:4px}
.page-heading h1{margin:0!important}
.page-heading .lead{margin:0!important;line-height:1.65!important}
.section-head,.experience-section-heading,.tm-panel-head{
  align-items:flex-start!important;
  gap:16px!important;
  margin-bottom:16px!important;
}
.section-head>div,.experience-section-heading>div,.tm-panel-head>div{display:grid;gap:7px;min-width:0}
.section-head :where(.eyebrow,h2,p),.experience-section-heading :where(.eyebrow,h2,p),.tm-panel-head :where(.eyebrow,h2,p){margin:0!important}
.section-head p,.experience-section-heading p,.tm-panel-head p{line-height:1.55!important}

/* Give primary content cards room to breathe. */
:where(.experience-section,.tm-dashboard-panel,.tm-performance-chart-panel,.tm-performance-recent,.results-command-center,.results-event-aggregate-section,.evidence-panel,.athlete-truth-card,.athlete-profile-flat-section,.athlete-record-actions){
  padding:clamp(20px,2.2vw,28px)!important;
}
:where(.experience-section,.tm-dashboard-panel,.tm-performance-chart-panel,.evidence-panel) > :where(p,.helper):not(:first-child){margin-top:10px}

/* Never glue a bold label to the following value/copy. */
:where(.experience-status-note,.warning-banner,.notice,.support-boundary,.tm-metric-help,.result-standard-inline,.result-goal-inline,.tm-progress-first-note,.result-session-summary,.athlete-flat-facts,.athlete-flat-ledger,.result-analysis-card,.tm-performance-metrics article,.results-overview-grid article,.tm-chart) > strong + :where(span,small,p,div),
:where(.experience-status-note,.warning-banner,.notice,.tm-metric-help,.result-standard-inline,.result-goal-inline,.athlete-flat-ledger,.result-analysis-card) strong + :where(span,small,p){
  margin-top:6px!important;
}
:where(.experience-status-note,.warning-banner,.notice,.support-boundary) strong{line-height:1.35!important}
:where(.experience-status-note,.warning-banner,.notice,.support-boundary) :where(span,small,p){line-height:1.55!important}

/* Status strips: label on its own visual beat, message beside/below with real gap. */
.experience-status-note{
  gap:8px 14px!important;
  padding:16px 18px!important;
}
.experience-status-note>strong{display:block!important;flex:0 0 auto}
.experience-status-note>span{display:block!important;min-width:0;flex:1 1 320px}
.experience-status-note.result-persistence-note{display:grid!important;grid-template-columns:max-content minmax(0,1fr)!important;align-items:start!important;column-gap:16px!important;row-gap:6px!important}

/* Metric strips/cards. */
.tm-metric-strip{gap:14px!important}
.tm-metric-strip>article{padding:18px!important;display:grid!important;gap:7px!important;align-content:start}
.tm-metric-strip>article :where(small,strong,span,p){margin:0!important}
.tm-metric-strip>article strong{line-height:1.2!important}
.tm-metric-strip>article span{line-height:1.5!important}

/* Charts: heading and explanation must not crowd the plot. */
.tm-performance-grid{gap:20px!important}
.tm-performance-chart-panel{display:grid!important;gap:16px!important}
.tm-performance-chart-panel .tm-panel-head{margin-bottom:0!important}
.tm-chart{display:grid!important;gap:9px!important;padding-top:4px}
.tm-chart :where(h3,p){margin:0!important}
.tm-chart h3{line-height:1.25!important}
.tm-chart p{line-height:1.55!important;max-width:76ch}
.tm-chart svg{margin-top:6px;min-height:150px}

/* Result pages remain readable when information is dense. */
.tm-results-evidence-body{display:grid;gap:24px!important;padding-top:6px}
.results-overview-grid{gap:16px!important}
.results-overview-grid article{padding:18px!important;gap:8px!important}
.results-overview-context{margin-top:16px!important;gap:12px!important}
.results-filter-drawer .experience-filter-bar{gap:18px 16px!important;padding:22px!important}
.results-filter-drawer .experience-filter-bar label{gap:8px!important}
.results-filter-drawer .experience-filter-bar input,
.results-filter-drawer .experience-filter-bar select{min-height:48px!important}
.results-event-aggregate-grid{gap:22px!important}
.results-event-aggregate{padding:22px!important;gap:20px!important}
.results-event-metrics{gap:0 22px!important}
.results-event-metrics span{padding:14px 0!important;gap:7px!important}
.result-session-group>summary{padding:18px 20px!important}
.result-session-head>div{display:grid;gap:7px!important}
.result-session-head :where(p,h2){margin:0!important}
.result-session-summary{gap:8px 14px!important;margin-top:5px}
.result-row{padding:20px!important;column-gap:22px!important;row-gap:14px!important}
.result-row-copy{display:grid;gap:10px!important;min-width:0}
.result-row-copy :where(.eyebrow,h3,p){margin:0!important}
.result-context-chips{gap:8px!important}
.result-standard-inline,.result-goal-inline{padding:14px 16px!important;gap:12px!important}
.result-analysis-grid{gap:20px!important}
.result-analysis-card{padding:20px!important}
.result-analysis-head{gap:14px!important;margin-bottom:14px!important}
.result-analysis-head>div{display:grid;gap:6px}
.result-analysis-head :where(p,h3){margin:0!important}
.result-stat-grid{gap:0 18px!important}
.result-stat-grid>span{padding:13px 0!important;display:grid;gap:6px!important}
.result-consistency-row{gap:18px!important;margin-top:16px!important}
.result-consistency-row>div{display:grid;gap:6px!important}

/* Athlete profile: stronger separation between identity, explanations and actions. */
.profile-band{gap:0!important}
.profile-band>div{padding:20px!important;gap:8px!important}
.profile-band>div :where(.eyebrow,strong,span){margin:0!important}
.profile-band strong{line-height:1.35!important}
.profile-band span{line-height:1.5!important}
.athlete-personalized-today,.athlete-personalized-goal,.athlete-profile-flat-section{display:grid;gap:18px!important}
.athlete-today-list{display:grid;gap:16px!important}
.athlete-today-list>article{padding:18px!important;gap:14px!important}
.athlete-today-list>article>div{display:grid;gap:8px!important}
.athlete-today-list :where(.eyebrow,h3,p,small){margin:0!important}
.athlete-goal-grid{gap:18px!important}
.athlete-goal-state{padding:18px!important;display:grid!important;gap:9px!important}
.athlete-goal-state :where(.eyebrow,h3,p,small){margin:0!important}
.athlete-flat-facts{gap:12px!important}
.athlete-flat-facts>div{padding:16px!important;display:grid!important;gap:6px!important}
.athlete-flat-ledger{gap:14px!important}
.athlete-flat-ledger>article{padding:16px 18px!important;display:grid!important;gap:9px!important}
.athlete-flat-ledger>article>div{display:grid!important;gap:5px!important}
.athlete-flat-ledger :where(strong,span,p,small){margin:0!important}

/* Action rows/buttons need a readable internal rhythm. */
.experience-action-grid,.notebook-command-grid,.actions{gap:12px!important}
.experience-action,.action-row{padding:16px 18px!important}
.experience-action-copy,.action-row>span:first-child{display:grid!important;gap:6px!important;min-width:0}
.experience-action-copy :where(strong,small),.action-row :where(strong,small){margin:0!important}
.btn{padding:11px 15px!important;min-height:46px!important;white-space:normal!important;text-wrap:balance}

/* Lists/tables: slightly taller rows reduce visual collision. */
.tm-performance-table-row{min-height:54px!important;padding-block:12px!important;column-gap:14px!important}
.tm-performance-table-head{padding-block:10px!important;column-gap:14px!important}
.tm-event-mix-row{min-height:30px;gap:12px!important}

@media(max-width:1000px){
  .tm-performance-grid{grid-template-columns:1fr!important}
  .experience-status-note.result-persistence-note{grid-template-columns:1fr!important}
  .result-row{padding:18px!important}
}
@media(max-width:760px){
  .page{gap:22px!important}
  :where(.experience-section,.tm-dashboard-panel,.tm-performance-chart-panel,.tm-performance-recent,.results-command-center,.results-event-aggregate-section,.evidence-panel,.athlete-truth-card,.athlete-profile-flat-section,.athlete-record-actions){padding:18px!important}
  .tm-results-evidence-body{gap:20px!important}
  .results-filter-drawer .experience-filter-bar{padding:18px!important;gap:16px!important}
  .result-row{padding:17px!important;row-gap:12px!important}
  .tm-chart svg{min-height:130px}
}
@media(max-width:480px){
  .section-head,.experience-section-heading,.tm-panel-head{margin-bottom:14px!important}
  :where(.experience-section,.tm-dashboard-panel,.tm-performance-chart-panel,.tm-performance-recent,.results-command-center,.results-event-aggregate-section,.evidence-panel,.athlete-truth-card,.athlete-profile-flat-section,.athlete-record-actions){padding:16px!important}
  .tm-metric-strip>article,.athlete-goal-state,.athlete-today-list>article{padding:16px!important}
  .result-session-group>summary{padding:16px!important}
  .result-row{padding:16px!important}
  .btn{width:100%}
}
@media(forced-colors:active){.tm-chart,.result-row,.athlete-goal-state,.athlete-today-list>article{forced-color-adjust:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}