/* Reference layout: fluid grids, V31.0.2-sized actions, existing theme colour tokens. */
:root,body{--ui-action-height:64px;--ui-action-gap:10px;--ui-control-radius:12px;--ui-panel-radius:18px}
body :is(.btn,.btn-ghost,.small-btn,.tr-toggle,.routine-add,.add-exercise,.tr-next,.tr-prev,.tr-end):where(:not(#page-calendar *)){
 display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;
 width:auto;max-width:100%;min-width:0;min-height:48px;padding:12px 18px;
 border-radius:var(--ui-control-radius);font:700 15px/1.3 var(--font-body,system-ui);text-align:center;white-space:normal;
}
body :is(.btn,.btn-ghost,.small-btn,.tr-toggle,.tr-drawer-btn) .ic{width:20px;height:20px;flex:0 0 20px;margin:0}
body :is(button,a,input,select){touch-action:manipulation}
body :is(.btn,.btn-ghost,.small-btn,.tr-toggle,.tr-drawer-btn):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
body :is(.card,.session-card,.stat,.exercise-card,.tr-pick,.exd-card){border-radius:var(--ui-panel-radius)}
body :is(input:not([type=checkbox]):not([type=radio]),select,textarea){border-radius:var(--ui-control-radius)}
body .section-head{gap:16px;flex-wrap:wrap}
body :is(.head-actions,.tr-opts,.hist-controls,.cal-nav,.pn-actions,.modal-actions,.wv-tools,.wv-actions):where(:not(#page-calendar *)){justify-content:center;gap:var(--ui-action-gap)}
body .head-actions:where(:not(#page-calendar *)){display:flex;flex-wrap:wrap;align-items:center}
body .head-actions > :is(.btn,.btn-ghost,.small-btn,.tr-toggle):where(:not(#page-calendar *)){flex:1 1 160px}
body .head-actions > .save-status:empty{display:none}
body #trSetup > .section-head .head-actions > button{min-height:var(--ui-action-height);font-size:16px;padding:12px}
body :is(#page-entry,#trSetup,#trRunner) > .section-head{padding:0;border:0;background:none;margin-bottom:24px;align-items:center}
body :is(#page-entry,#trSetup,#trRunner) > .section-head .section-title{font-size:24px;line-height:1.25}
body :is(#page-entry,#trSetup,#trRunner) > .section-head .section-sub{font-size:15px;line-height:1.5}
body .session-actions{display:grid;grid-template-rows:minmax(var(--ui-action-height),auto);align-items:stretch;gap:10px;width:100%;max-width:660px}
body .session-action-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
body .session-action-row > .btn-ghost{width:100%;min-width:0;min-height:var(--ui-action-height);padding:8px;font-size:18px}
body :is(#trSetup .tr-add-grid,#trRunner .session-control-grid){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:none;align-items:stretch}
body :is(#trSetup .tr-add-grid,#trRunner .session-control-grid) > button{width:100%;min-width:0;min-height:var(--ui-action-height);font-size:18px;padding:14px 12px;border-radius:var(--ui-control-radius)}
body #trRunner > .section-head .session-control-grid{width:100%;max-width:660px;flex-shrink:0}
body #trRunner .session-control-grid > button{padding:8px}
body #trRunner .tr-run-head{gap:12px}
body #trRunner .tr-run-head .tr-clock{margin:0;flex-shrink:0}

body #trSetup [data-tour=guided-build]{padding:20px;margin:0 0 20px}
body #trSetup [data-tour=guided-build] .section-head{justify-content:flex-start}
body #trSetup [data-tour=guided-mode]{padding:20px;margin-bottom:20px}
body #trSetup .card-title{font-weight:800;font-size:13px;letter-spacing:.02em}
body #trSetup .tr-hint{font-size:14px;line-height:1.5}
body .tr-opts{display:flex;flex-wrap:wrap;justify-content:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
body .tr-opts .tr-toggle{flex:1 1 150px;min-height:48px;font-size:14px;padding:10px 12px}
body .seg:where(:not(#page-calendar *)){display:inline-flex;justify-content:center;max-width:100%;border-radius:12px;padding:4px;background:var(--surface2);gap:4px}
body .seg > button:where(:not(#page-calendar *)){min-height:44px;padding:10px 12px;line-height:1.25;font-size:14px;white-space:normal;min-width:0;flex:1 1 0;border-radius:9px}
body #trModeSeg{width:100%}
body #trainSubnav{justify-content:center;gap:8px}
body #trainSubnav{position:relative;top:auto;max-width:600px;margin:20px auto;padding:6px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
body #trainSubnav .subtab{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:1 1 0;min-width:0;width:auto;min-height:var(--ui-action-height);padding:12px;font-size:18px;font-weight:700;white-space:normal;border-radius:12px;border-color:transparent}
body #trainSubnav .subtab.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
body #trainSubnav .subtab .ic{width:22px;height:22px;flex:0 0 22px}
body .blade-add{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}
body .blade-add > .btn-ghost{width:100%;min-width:0;min-height:var(--ui-action-height);font-size:16px;padding:12px 8px}
/* V31.0.8 (owner #4) — the type buttons stay; an open section shows as on */
body .blade-add > .btn-ghost.on{border-color:var(--accent);color:var(--accent);background:rgba(var(--accent-rgb),.08)}
body .session-meta{margin-bottom:24px}
body .session-meta .entry-topbar{grid-template-columns:minmax(150px,1.25fr) minmax(0,1fr) minmax(0,1fr);margin-bottom:16px}
body .session-meta .entry-topbar :is(input,select){font-size:16px;min-height:56px}
body #entryDate{padding-inline:10px}
body #page-entry > .grid-2{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
body #page-entry > .grid-2 > div{min-width:0}
body .add-exercise{display:flex;width:100%;min-height:52px;margin:12px 0;border-style:dashed}
body :is(.ehead-tools,.card-tools){display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}
body :is(.icon-mini,.icon-btn){min-width:44px;min-height:44px;border-radius:12px}
body #intervalActions{justify-content:center}
body .tr-action-rail{display:none}
body #trDrawerQuick{display:block;max-height:calc(100dvh - 140px);overflow-y:auto;overscroll-behavior:contain}
body :is(#trDrawerQuick,.tr-action-rail) .tr-drawer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
body :is(#trDrawerQuick,.tr-action-rail) .tr-drawer-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-width:0;min-height:var(--ui-action-height);padding:10px 8px;font:700 14px/1.3 var(--font-body,system-ui);border-radius:12px}
body :is(#trDrawerQuick,.tr-action-rail) .tr-drawer-primary{display:flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;width:100%;min-height:var(--ui-action-height);padding:12px;font:700 16px/1.3 var(--font-body,system-ui);border-radius:12px}
body :is(#trDrawerQuick,.tr-action-rail) .ic{width:20px;height:20px;flex:0 0 20px}
body nav:not(.bottom-nav) .theme-btn{min-height:44px;border-radius:12px}
body #page-food .wo-food{--fd-bg:var(--bg);--fd-panel:var(--surface);--fd-line:var(--border);--fd-text:var(--text);--fd-muted:var(--muted);--fd-accent:var(--accent)}
body #page-food .wo-food :is(.fd-toolbar,.fd-more-actions,.fd-entry-actions,.fd-plan-actions){justify-content:center;flex-wrap:wrap}
body #page-food .wo-food :is(.fd-toolbar,.fd-more-actions,.fd-entry-actions,.fd-plan-actions) > button,body #page-food .wo-food button.fd-primary{min-height:48px;font-size:15px;padding:12px 16px;border-radius:12px}
body #page-food .wo-food :is(.fd-card,.fd-energy,.fd-meal){border-radius:18px}
@media(min-width:900px){
 body :is(#trSetup .tr-add-grid,#trRunner .session-control-grid){grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:1100px){
 body #trSetup{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(340px,1fr);gap:24px;align-items:start}
 body #trSetup > .section-head{grid-column:1/-1}
 body #trSetup > .section-head .head-actions{width:min(50%,560px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 body #trSetup [data-tour=guided-build]{grid-column:1;grid-row:2;margin:0}
 body #trSetup [data-tour=guided-mode]{grid-column:1;grid-row:3;margin:0}
 body #trSetup #trTray{grid-column:1/-1}
 body .tr-action-rail{display:block;grid-column:2;grid-row:2/span 2;padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--surface)}
 body .tr-action-rail h3{font-size:16px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
 /* V32.0.2 — the rail keeps the drawer's own order (it used to reorder buttons with CSS order). */
 body #trActionRail .tr-drawer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

 body #page-entry > .grid-2{grid-template-columns:minmax(260px,.8fr) minmax(0,1.8fr)}
 body #page-entry > .grid-2 > div:first-child{grid-column:2;grid-row:1}
 body #page-entry > .grid-2 > div:last-child{grid-column:1;grid-row:1}
 body #page-entry > .section-head{flex-direction:row}
 body #page-entry > .section-head .session-actions{width:min(60%,660px)}
}
@media(max-width:1099px){
 body :is(#page-entry,#trSetup,#trRunner) > .section-head{flex-direction:column;align-items:stretch}
 body #trSetup > .section-head .head-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 body #trSetup > .section-head .head-actions > button{width:100%;min-height:var(--ui-action-height);font-size:16px;padding:12px 8px}
}
@media(max-width:600px){
 body .page{padding:16px}
 body #trainSubnav{margin:16px;gap:6px}
 body #trSetup :is([data-tour=guided-build],[data-tour=guided-mode]){padding:16px}
 body .session-action-row{gap:8px}
 body .session-action-row > .btn-ghost{padding:8px 6px;gap:6px}
 body .session-action-row .ic{width:18px;height:18px;flex-basis:18px}
 body .ehead-tools :is(.btn-ghost,.small-btn){padding:10px 12px;font-size:14px;min-height:44px}
}
@media(max-width:420px){
 body .session-meta .entry-topbar{grid-template-columns:repeat(2,minmax(0,1fr))}
 body .session-meta .entry-topbar > .form-group:first-child{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){body :is(.btn,.btn-ghost,.small-btn,.tr-toggle,.subtab){transition:none}}

@media(max-width:600px){
 body nav:not(.bottom-nav){display:grid;grid-template-columns:minmax(0,1fr) auto auto auto auto;gap:6px;padding:10px 12px;align-items:center}
 body nav:not(.bottom-nav) .nav-brand{grid-column:1;grid-row:1;order:0;min-width:0;margin:0;gap:6px}
 body nav:not(.bottom-nav) .nav-id{min-width:0}
 body nav:not(.bottom-nav) .nav-kicker{display:flex;flex-wrap:wrap;gap:2px 4px;font-size:10px}
 body nav:not(.bottom-nav) .nav-ver{font-size:8px;margin-left:0}
 body nav:not(.bottom-nav) .nav-tile{width:28px;height:28px;flex:0 0 28px}
 body nav:not(.bottom-nav) .nav-sync{grid-column:2;grid-row:1;order:0}
 body nav:not(.bottom-nav) .unit-btn{grid-column:3;grid-row:1;order:0}
 body nav:not(.bottom-nav) .palette-btn{grid-column:4;grid-row:1;order:0}
 body nav:not(.bottom-nav) .theme-btn:last-child{grid-column:5;grid-row:1;order:0}
 body nav:not(.bottom-nav) .theme-btn{min-width:36px;padding:6px}
}

body #page-food .wo-food button.fd-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px}



/* Calendar placement is explicitly retained by the owner. Training grids
   and shared icons do not impose centered rows or stretched buttons here. */
body #page-calendar > .section-head{flex-direction:column;align-items:flex-start;flex-wrap:nowrap}
body #page-calendar > .section-head > .head-actions{justify-content:flex-start}

/* Keep a wrapped action label next to its icon, with the pair centered as a unit. */
body :is(.btn,.btn-ghost,.small-btn,.tr-toggle) > .ic + span{min-width:0;text-align:start}

/* Same mouse hover feedback for filled, neutral, selected and icon actions.
   Colour tokens and dimensions are preserved; touch has no latched hover. */
@media(hover:hover){
 body :is(button,.btn,.btn-ghost,[role=button]):not(:disabled):not([aria-disabled=true]):hover{
  border-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent),0 0 10px rgba(var(--accent-rgb),.18);
  filter:brightness(1.06);
 }
}

/* V31.0.7: horizontally scrollable navigation owns its full width, including the first tab. */
body :is(#logSubnav,#trackSubnav){width:100%;max-width:100%;min-width:0;box-sizing:border-box;justify-content:flex-start;overscroll-behavior-x:contain}
body #logSubnav .subtab{flex:0 0 auto}
body #logSubnav{scrollbar-width:thin}
body #logSubnav::-webkit-scrollbar{display:block;height:4px}
body #logSubnav::-webkit-scrollbar-thumb{background:var(--muted);border-radius:999px}
/* V31.0.8 (#15): Body's Log / Stats / History are Tracking's top-bar tabs (icon + label at natural width), from the
   left at every width; the narrowest phones scroll the row sideways. The 4px padding, cancelled by the margin, keeps
   the focus ring inside the scroll box. */
body .body-subnav{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:6px;margin:0 -4px 16px;padding:4px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}
body .body-subnav::-webkit-scrollbar{display:none}
body .body-subnav .subtab{flex:0 0 auto}
/* V31.0.8 (#16): Profile → Workouts' bar only. Each button is as wide as its icon and label, so the selected fill covers
   the whole label; the row starts at the left edge and scrolls sideways when it does not fit. The shared .seg rule
   (equal columns) is unchanged. */
body #exMgrSeg{display:flex;justify-content:flex-start;width:max-content;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}
body #exMgrSeg > button{flex:0 0 auto;white-space:nowrap}
/* V31.0.8 (#17): the select that picks which list Profile → Workouts → Lists shows. */
body .lists-pick{max-width:360px;margin:12px 0 14px}
body .body-panel[hidden],body [data-tour="guided-mode"][hidden]{display:none}
body .body-form-wrap{max-width:900px;margin:0 auto}
body .tracking-form-actions[hidden]{display:none}

body #howToBtn{min-width:44px}
body .page-howto{width:min(680px,calc(100% - 24px));max-height:calc(100dvh - 32px);overflow:auto;padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--text);box-sizing:border-box}
body .page-howto::backdrop{background:rgba(0,0,0,.65)}
body .page-howto-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
body .page-howto-head h2{margin:0;font-size:20px}
body .page-howto video{display:block;width:100%;max-height:60dvh;margin:16px auto;background:#000;border-radius:12px}
body .page-howto-end[hidden]{display:none}
body .page-howto-note{font-size:13px;color:var(--muted)}

body #howtoBody .measurement-recommendations{display:grid;gap:10px;margin:12px 0}
body #howtoBody .measurement-recommendations > div{display:grid;gap:4px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface2)}
body #howtoBody .measurement-recommendations span{color:var(--muted)}

/* V31.0.8 review: one header component for both session entry points. */
body :is(#page-entry,#trSetup) > .section-head .session-start-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:none;gap:10px;align-items:stretch}
body .session-start-actions .session-action-row{display:contents}
body :is(#page-entry,#trSetup) > .section-head .session-start-actions button{width:100%;min-height:var(--ui-action-height);padding:8px;font-size:16px;gap:8px}
body .session-start-actions .ic{width:20px;height:20px;flex-basis:20px}
@media(min-width:1100px){body :is(#page-entry,#trSetup) > .section-head .session-start-actions{width:min(50%,560px)}}
body #page-entry .section-utility{flex-direction:row;align-items:center}
body #page-entry .ex-collapse{transform:none}
body .visual-filter-actions{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:8px;margin:8px 0 18px}
body .visual-filter-actions > span{font-size:13px;color:var(--muted);width:100%}
body .visual-filter-actions .btn-ghost{font-size:14px;min-height:48px}
body .pk-select:focus:not(:focus-visible){outline:none;box-shadow:none}
@media(hover:none){body .pk-select:hover{box-shadow:none;filter:none;background:transparent}}
body #page-entry.reviewing > :not(#logSummary){display:none}
body #logSummary[hidden],body #logSummaryDetails[hidden]{display:none}
body #logSummary{margin-top:0}
body #sessionSummaryTitle{font-size:24px;margin:4px 0}
body .summary-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
body .summary-stats .stat{min-width:0;padding:14px}
body .summary-stats .stat-value{font-size:24px;overflow-wrap:anywhere}
body .summary-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0}
body .summary-panels .card{margin:0}
body .summary-muscle{display:flex;align-items:center;gap:12px;margin:16px 0}
body .summary-muscle > div{flex:1;min-width:0}
body .summary-muscle > span:last-child{font-size:12px;color:var(--muted)}
body .summary-muscle .media-filter-image{width:48px;height:48px;object-fit:contain}
body .summary-bar{height:8px;border-radius:8px;background:var(--surface2);margin-top:8px;overflow:hidden}
body .summary-bar span{display:block;height:100%;background:var(--accent);border-radius:inherit}
body .summary-workouts{display:grid;gap:16px}
body .summary-workout{display:flex;gap:12px;align-items:center}
body .summary-workout .wo-ic{width:44px;height:44px;object-fit:contain}
body .summary-workout .section-sub{margin:4px 0 0}
body #logSummary .session-summary-grid{margin:16px 0}
@media(max-width:600px){body .summary-panels{grid-template-columns:minmax(0,1fr)}}

body .session-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
body .session-summary-grid input{width:100%;box-sizing:border-box;min-height:52px}
body .summary-chart svg{display:block;width:100%;max-height:220px;margin:16px 0}
body .summary-chart{margin:16px 0}