/* Shared visual system: approved Figma inspiration, not a new application workflow. */
:root{
 --canvas:#141b23;--panel:#1c2631;--raised-surface:#253340;--text:#f0f3f5;--secondary-text:#b5c1ca;--accent:#79c9be;
 --bg:var(--canvas);--surface:var(--panel);--raised:var(--raised-surface);--hover:#2c3d4b;
 --ink:var(--text);--muted:var(--secondary-text);--dim:#a6b7c3;--line:#384b59;--cyan:var(--accent);--cyan-soft:#203c3e;
 --font:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
 --radius-panel:16px;--radius-control:12px;
}
body{font-size:16px;line-height:1.5;background:var(--canvas)}
button,input,select,textarea{font-family:var(--font)}
h1{font-size:32px;line-height:1.2;letter-spacing:-.025em}h2{font-size:23px}h3{font-size:18px}
label,small,.tiny,.form-note,.chart-note,.calendar-note,.nutrition-note{font-size:14px;line-height:1.5}
.eyebrow{font-size:14px;letter-spacing:.04em;color:var(--accent)}
button{border-radius:var(--radius-control);font-size:14px;min-height:44px}
button.primary{color:#132c2e;background:var(--accent);border-color:var(--accent)}
button.primary:hover:not(:disabled){background:#98dbd2;color:#132c2e;border-color:#98dbd2}
button:disabled{opacity:1;background:var(--raised);color:var(--muted);border-color:transparent}
button.outline{color:var(--text);border-color:var(--line)}
button.outline:hover:not(:disabled){border-color:var(--accent)}
input,select,textarea{background:var(--raised);border-color:var(--line);border-radius:var(--radius-control);font-size:16px;min-height:48px}
input::placeholder,textarea::placeholder{color:var(--muted)}
input[type=checkbox]{min-height:18px}
input[type=range]{min-height:44px;background:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.panel{border:0;border-radius:var(--radius-panel);padding:24px;background:var(--panel)}
.site-header{max-width:1280px;min-height:88px;height:auto;padding:20px 40px;gap:24px;border-bottom:0;flex-wrap:wrap}
.brand{color:var(--text)}.brand svg{color:var(--accent)}
.brand span{font-weight:650;letter-spacing:-.02em}
.app-switch{margin-left:auto}.app-switch button{font-size:14px;padding:10px 14px;border-radius:10px}
.desktop-nav{gap:16px}.desktop-nav button{font-size:14px}
.header-end{gap:12px}.avatar{background:var(--raised)}
.sync-status{background:transparent;border:0;font-size:14px}
#sync-detail{font-size:14px}#save-status{font-size:14px}
main#main-content{max-width:1280px;margin:auto;padding:24px 40px calc(72px + var(--dock-reserve,0px))}
.page-heading{margin-bottom:32px}.page-heading p:not(.eyebrow){font-size:16px}
.section-head{gap:16px;flex-wrap:wrap}.section-head h2{font-size:20px}
.section-head small{font-size:14px}
.form-note{color:var(--muted);margin-top:12px;max-width:70ch}
.tabs{gap:16px}.tabs button{font-size:14px}
.tabs button[aria-current=page],.tabs button.selected{color:var(--accent);border-color:var(--accent)}
details>summary{min-height:44px;cursor:pointer;font-size:14px;color:var(--muted);padding:10px 0}
details[open]>summary{margin-bottom:12px}
#editor-dialog{background:var(--panel);border:1px solid var(--line);border-radius:16px;color:var(--text)}
#editor-dialog::backdrop{background:rgba(8,14,20,.75)}
.dialog-head h2{font-size:24px}.form-actions{gap:12px}
.mobile-nav{background:var(--panel)}.mobile-nav button{font-size:14px}
.mobile-nav button[aria-current=page]{background:var(--cyan-soft)}
.active-dock{background:var(--panel);border-color:var(--line);border-radius:14px}
.connection-notice,.toast{font-size:14px}
/* Journal: generous cards, legible names; preserve equipment identity and chart semantics. */
.journal-grid.journal-refined{grid-template-columns:minmax(350px,.95fr) minmax(0,1.2fr);gap:24px}
.journal-refined .exercise-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.journal-refined .exercise-item{background:var(--raised);border:1px solid transparent;border-radius:12px;aspect-ratio:1 / 1.15}
.journal-refined .exercise-item.selected{background:var(--cyan-soft);border-color:var(--accent)}
.journal-refined .exercise-select{padding:12px;gap:8px}
.journal-refined .exercise-select strong{font-size:14px;line-height:1.35}
.exercise-art{height:68%}.art-unavailable{font-size:14px}
.journal-muscles,.journal-variant,.journal-refined .tabs button,.journal-reference-note{font-size:14px;line-height:1.5}
.journal-main{padding:24px;border-radius:16px}
.chart-tooltip{background:var(--raised);color:var(--text);font-size:14px}
.calendar-note,.chart-note{color:var(--muted)}
/* Direction and training retain existing controls and snapshot behavior. */
.direction-page{max-width:none}.direction-chart{padding:24px;background:var(--panel);border-radius:16px}
.direction-chart h2,.direction-page form h2{font-size:20px}
.direction-chart .section-head small,.direction-slider output small,.direction-slider .range-endpoints,.direction-difficulty small,.direction-unmapped,.direction-page [data-save-caption]{font-size:14px;opacity:1}
.direction-sliders{gap:24px 48px}.direction-slider>span{font-size:16px}
.direction-difficulty input:checked+span{background:var(--cyan-soft);color:var(--accent);border-color:var(--accent)}
.direction-difficulty label>span{background:var(--raised);border-radius:12px}
.direction-page form{background:var(--panel);border-radius:16px;padding:24px}
.today-sets button{font-size:14px;min-height:44px}.review-story p{font-size:16px}
/* Nutrition: wide summary, calm two-panel food picker and meal builder. */
.nutrition-page{max-width:none}.nutrition-heading{margin-bottom:28px;align-items:flex-end}
.nutrition-heading h1{font-size:32px}.nutrition-heading label{font-size:14px}
.nutrition-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:24px;background:var(--panel);border-radius:16px;margin:0 0 24px}
.nutrition-metrics section{border:0;background:transparent;padding:0 12px;gap:10px}
.nutrition-metrics section:first-child{padding-left:0}.nutrition-metrics section>span,.nutrition-metrics small{font-size:14px}
.nutrition-metrics strong{font-size:26px;font-weight:650}
.nutrition-tabs{gap:16px;margin-bottom:20px}.nutrition-tabs button{border:0;background:transparent;color:var(--muted);font-weight:500}
.nutrition-tabs [aria-current=page]{background:var(--cyan-soft);color:var(--accent)}
.nutrition-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px}
.nutrition-grid>.panel{padding:24px;border-radius:16px}
.nutrition-grid h2{font-size:20px;margin-bottom:20px}
.nutrition-food-grid{gap:12px;margin-top:20px}
.nutrition-food{background:var(--raised);border:1px solid transparent;border-radius:12px;min-height:132px;gap:12px;padding:16px;font-weight:400;justify-content:center}
.nutrition-food span{font-size:14px;color:var(--muted)}.nutrition-food strong{font-size:16px;font-weight:650}
.nutrition-food small{font-size:14px}.nutrition-food.is-selected{background:var(--cyan-soft);border-color:var(--accent)}
.nutrition-food.is-selected span{color:var(--accent)}
.nutrition-amount-row{gap:12px;padding:20px 0;border-color:var(--line)}
.nutrition-amount-row strong{font-size:16px}.nutrition-amount-row small{font-size:14px}
.nutrition-amount{width:112px}.nutrition-amount input{font-size:16px}
.nutrition-amount-row button.ghost{padding:8px;flex-shrink:0}
.nutrition-total{padding:22px 0;font-size:16px}
.nutrition-composer .full-width{min-height:48px;margin-top:12px}
.nutrition-note{font-size:14px;margin-top:16px;color:var(--muted)}
.nutrition-context{margin-top:8px;border-top:1px solid var(--line)}
.nutrition-context p{font-size:14px;color:var(--muted);margin-bottom:4px}
.nutrition-log small{font-size:14px}
@media(min-width:761px) and (max-width:1100px){
 .site-header{padding:20px 24px;gap:16px}main#main-content{padding-left:24px;padding-right:24px}
 .journal-grid.journal-refined{grid-template-columns:minmax(280px,.85fr) minmax(0,1.2fr)}
 .journal-refined .exercise-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .nutrition-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
 .nutrition-food-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 .site-header{padding:16px 20px;min-height:76px;gap:8px}.brand span{font-size:17px}
 .app-switch button{padding:10px 12px;font-size:14px}.header-end{display:none}
 main#main-content,.nutrition-active main#main-content{padding:20px 20px calc(100px + var(--dock-reserve,0px))}
 .nutrition-active main#main-content{padding-bottom:40px}
 h1,.page-heading h1,.nutrition-heading h1{font-size:28px}h2{font-size:22px}
 .page-heading{gap:16px;flex-wrap:wrap;margin-bottom:24px}.page-heading p:not(.eyebrow){font-size:16px}
 .panel,.nutrition-grid>.panel,.journal-main{padding:20px;border-radius:14px}
 .journal-grid.journal-refined{display:block}.journal-refined .exercise-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .journal-refined .exercise-item{aspect-ratio:1 / 1.12}
 .journal-refined .exercise-select strong{font-size:14px}
 .journal-refined .tabs{gap:14px}.journal-refined .tabs button{font-size:14px}
 .direction-page form,.direction-chart{padding:20px}.direction-sliders{column-gap:20px}
 .direction-slider>span{font-size:14px}.direction-slider output{font-size:16px}
 .direction-difficulty>div{grid-template-columns:repeat(2,minmax(0,1fr))}
 .direction-page .form-actions{align-items:flex-start;flex-direction:column}
 .nutrition-heading{align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:24px}
 .nutrition-heading label{width:auto;max-width:none;font-size:14px;min-width:0}
 .nutrition-heading input{width:155px;font-size:16px}
 .nutrition-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:20px}
 .nutrition-metrics section{padding:0;gap:8px}.nutrition-metrics strong{font-size:24px}
 .nutrition-metrics section>span,.nutrition-metrics strong small{font-size:14px}
 .nutrition-tabs{gap:4px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .nutrition-tabs button{font-size:14px;padding:10px}
 .nutrition-grid{grid-template-columns:minmax(0,1fr);gap:20px}
 .nutrition-food-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .nutrition-food{min-height:128px;padding:14px;gap:10px}
 .nutrition-amount-row{flex-wrap:wrap;gap:8px}.nutrition-amount-row>div{min-width:105px}
 .nutrition-amount{width:112px}.nutrition-amount-row strong{font-size:15px}
 .review-story p{font-size:16px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Readability refinements identified in desktop/mobile visual QA. */
button.small,button.link,.mini-actions button,.segmented button,.journal-range button,.library-panel input,.library-panel select,.history-table th,.history-table td,.review-links a,.review-links button{font-size:14px}
.chart-note,.chart-caption,.journal-chart-note,.review-story .tiny,.muscle-count span,.muscle-count small,.muscle-map-label{font-size:14px}
.chart text{font-size:14px}
.nutrition-amount{flex-direction:row;width:144px;gap:0}
.nutrition-amount input{padding-right:34px}
.nutrition-amount>span:not(.sr-only){top:50%;transform:translateY(-50%)}
label.check input[type=checkbox],.start-layout input[type=checkbox]{flex:0 0 18px;width:18px;min-width:18px;min-height:18px;height:18px;margin:0;padding:0}
.start-layout label.check{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px}
@media(max-width:760px){.nutrition-amount{width:132px}.nutrition-amount input{font-size:16px}.journal-reference-details{margin-top:12px}}
#main-content button:not(.exercise-select){font-size:14px}
#main-content .chart-note,#main-content .journal-cell-note,#main-content .journal-identity,#main-content .journal-comparison-basis,#main-content .form-note,#main-content .today-card p,#main-content .sequence-card p,#main-content .review-topline p,#main-content .start-layout .panel>p,#main-content details p,#main-content table th,#main-content table td{font-size:14px}
#main-content .muscle-diagram text{font-size:18px}
.journal-refined .exercise-list{max-height:none;height:auto;overflow:visible}
@media(max-width:760px){.journal-refined .exercise-list{max-height:none;height:auto;overflow:visible}}
#main-content .journal-refined .library-panel .exercise-list{max-height:none;height:auto;overflow:visible}
#main-content .review-refined p{font-size:14px}
#main-content .review-refined .review-story>p{font-size:16px}
.nutrition-composer>div>p{margin-top:16px}
/* Controls remain distinguishable without outlining every panel or card. */
input:not([type=checkbox]):not([type=range]),select,textarea{border-color:#6a8392}
#editor-dialog small,#editor-dialog .form-note,#editor-dialog dt,#editor-dialog dd{font-size:14px}
#main-content .train-grid small,#main-content .train-grid .tiny{font-size:14px}
/* Meal plan creation and quick log are independent workflows. */
.nutrition-grid.nutrition-single{grid-template-columns:minmax(0,1fr)}
.nutrition-checkout h2{margin-bottom:12px}
.nutrition-checkout .nutrition-time-blocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:20px 0 8px;max-width:320px}
.nutrition-time-blocks button{background:var(--raised);border:1px solid transparent;min-height:44px;font-weight:500}
.nutrition-time-blocks button[aria-pressed=true]{background:var(--cyan-soft);border-color:var(--accent);color:var(--accent)}
.nutrition-meal-card{background:var(--cyan-soft)}
.nutrition-meal-card>span{color:var(--accent)}
.nutrition-keep{display:flex;flex-direction:row;align-items:center;gap:8px;margin-top:8px;min-height:44px;font-size:14px;cursor:pointer}
.nutrition-keep input[type=checkbox]{width:18px;height:18px;min-height:18px;flex:0 0 18px;margin:0;padding:0}
.nutrition-keep>span{font-size:14px;color:var(--muted)}
.nutrition-ingredient-row{align-items:center}
.nutrition-meal-creator .section-head,.nutrition-saved-plan .section-head{margin-bottom:20px}
.nutrition-meal-creator .section-head h2,.nutrition-saved-plan .section-head h2{margin-bottom:0}
.nutrition-log-block{margin-top:24px}.nutrition-log-block h3{color:var(--accent);font-size:18px;margin-bottom:16px}
.nutrition-saved-plan .nutrition-food-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.nutrition-empty{font-size:16px;color:var(--muted);grid-column:1/-1;padding:16px 0}
@media(max-width:760px){.nutrition-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.nutrition-tabs button{padding:10px 6px}.nutrition-saved-plan .nutrition-food-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nutrition-meal-creator .section-head{gap:8px}.nutrition-ingredient-row>div{min-width:100px}}