/* RepRoom 2.1 layout safety and mobile usability refinements */
:root{--purple:#9333EA;--purple-strong:#7E22CE;--yellow:#FACC15}
:root[data-theme="dark"]{--mint:#A855F7;--warm:#D8B4FE;--mint-bg:#2B143E;--active:#32194D}
:root[data-theme="light"]{--mint:#7E22CE;--warm:#7E22CE;--mint-bg:#F3E8FF;--active:#EDE1FB}
@media(prefers-color-scheme:dark){:root[data-theme="system"]{--mint:#A855F7;--warm:#D8B4FE;--mint-bg:#2B143E;--active:#32194D}}
@media(prefers-color-scheme:light){:root[data-theme="system"]{--mint:#7E22CE;--warm:#7E22CE;--mint-bg:#F3E8FF;--active:#EDE1FB}}
html,body,#app,.layout,.content{max-width:100%;min-width:0}
body{overflow-x:hidden}
.content,.panel,.exercise-card,.exercise-head,.grow,.toolstrip,.field{min-width:0}
.page-head,.section-head,.exercise-head,.routine-card,.row,.modal-head,.modal-footer,.exercise-foot,.set-extras,.exercise-controls{min-width:0;max-width:100%;overflow-wrap:anywhere}
.exercise-head .title,.routine-card h3,.exercise-row strong,.history-item strong,.summary-exercise strong{overflow-wrap:anywhere;word-break:normal;white-space:normal;line-height:1.32}
.exercise-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start}
.exercise-controls{display:flex;flex-wrap:wrap;gap:4px;max-width:105px;justify-content:end}
.exercise-controls button{min-height:40px;min-width:30px}
.exercise-foot{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;padding:12px}
.exercise-foot .button{flex:1 1 85px;min-width:0;min-height:44px;white-space:normal;padding:10px 7px}
.set-extras{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 2px}
.set-extras .hint{flex:1 1 140px;line-height:1.4}
.set-extras button{min-height:39px;white-space:normal}
.set{min-width:0;max-width:100%;grid-template-columns:32px minmax(0,1fr) minmax(0,1fr) 44px!important;gap:7px!important;align-items:start}
.set input{min-width:0;width:100%;max-width:100%;font-size:16px;min-height:45px;text-align:center;padding:9px 3px}
.set .complete{min-width:43px;min-height:45px}.set-id{min-width:32px;min-height:43px}
.set .input-error{grid-column:2/5;white-space:normal}
.input-error{color:#E85858;font-size:12px;line-height:1.4;padding:5px 3px;font-weight:650}
[aria-invalid="true"]{outline:2px solid #EC535D!important;outline-offset:0;border-color:#EC535D!important}
.exercise-media{margin:15px 0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;text-align:center}
.exercise-media img{display:block;width:100%;max-height:400px;object-fit:contain}
.exercise-media figcaption{font-size:11px;color:#52525B;padding:10px;background:#f6f3ff}
.undo-toast{position:fixed;z-index:2000;bottom:calc(98px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);max-width:calc(100vw - 24px);min-width:min(280px,calc(100vw - 24px));border-radius:14px;padding:9px 13px;display:flex;align-items:center;justify-content:space-between;gap:15px;background:var(--panel);border:1px solid var(--mint);box-shadow:0 8px 25px #0004;font-weight:650}
.modal{width:min(600px,100%);max-width:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.modal-footer{display:flex;flex-wrap:wrap;gap:9px;padding-bottom:max(0px,env(safe-area-inset-bottom,0px))}
.modal-footer button{min-width:0;flex:1 1 120px;white-space:normal;min-height:44px}
.modal-head .close{min-width:44px;min-height:44px;flex-shrink:0}
.routine-edit-fields{grid-template-columns:minmax(70px,0.75fr) minmax(100px,1.2fr) minmax(90px,1fr)}
.routine-edit-item .row,.exercise-row .row{flex-wrap:wrap;gap:7px}
.toolstrip{display:grid;grid-template-columns:minmax(0,2fr) minmax(90px,1fr) minmax(90px,1fr)}
.filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.profile-select{max-width:100%}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
@media(max-width:920px){.content{padding-bottom:calc(123px + env(safe-area-inset-bottom,0px))}.mobile-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));min-width:0;gap:2px}.mobile-nav button{min-width:0;min-height:56px;padding:5px 0;white-space:normal;line-height:1.15}.mobile-nav button .nav-icon{display:block;font-size:20px}.timer{bottom:calc(83px + env(safe-area-inset-bottom,0px));flex-wrap:wrap;justify-content:center}}
@media(max-width:580px){.content{padding-left:13px;padding-right:13px}.panel{max-width:100%}.routine-edit-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.routine-edit-fields .field:last-child{grid-column:1/-1}.filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-grid>.field:first-child{grid-column:1/-1}.exercise-head{grid-template-columns:minmax(0,1fr) auto}.exercise-head .title{font-size:16px}.exercise-foot .button{flex:1 1 95px}.modal{max-height:96dvh;padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}.timer .button{min-height:40px}.toolstrip{grid-template-columns:repeat(2,minmax(0,1fr))}.toolstrip .searchbox{grid-column:1/-1}}
@media(max-width:359px){.content{padding-left:8px;padding-right:8px}.panel{padding:11px}.exercise-controls{max-width:78px}.exercise-controls button{min-width:25px;min-height:40px;padding:4px}.set{gap:4px!important;grid-template-columns:28px minmax(0,1fr) minmax(0,1fr) 40px!important}.set .complete{min-width:38px}.set-id{min-width:28px}.exercise-foot{padding:10px 0;gap:5px}.exercise-foot .button{min-width:0;flex:1 1 88px;padding:8px 5px;font-size:12px}.modal{padding:15px 10px calc(20px + env(safe-area-inset-bottom,0px))}.mobile-nav button{font-size:9px;letter-spacing:-.01em}.week-stats .value{font-size:19px}.routine-edit-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:300px){.page-head h1{font-size:23px}.exercise-head{grid-template-columns:1fr}.exercise-controls{max-width:none;justify-content:flex-start}.set input{font-size:16px;padding:7px 1px}.mobile-nav .nav-icon{font-size:16px!important}.mobile-nav button{font-size:8px}.session-top .row>.button{min-width:0}.timer{gap:3px}.timer .button{padding:6px 2px}}
@media(prefers-reduced-motion:reduce){.exercise-media img{animation:none!important}}
/* Prevent the Settings info grid from expanding beyond 280px. */
.stack-small,.panel.stack-small{min-width:0;max-width:100%;grid-template-columns:minmax(0,1fr)}
.panel.stack-small>.row{min-width:0;max-width:100%;flex-wrap:wrap;overflow-wrap:anywhere}
.panel.stack-small>.row>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
@media(max-width:320px){.panel.stack-small>.row{gap:5px}.panel.stack-small>.row strong{font-size:12px}}

/* V2.2 direct Exercises access, visible save state and update banner */
:root{--purple:#9333EA;--purple-strong:#7E22CE;--yellow:#FACC15}
.mobile-nav button{overflow:hidden;min-width:0;touch-action:manipulation}
.mobile-nav button.active{color:var(--yellow);font-weight:800}
.mobile-nav{grid-template-columns:repeat(6,minmax(0,1fr))!important}
.save-indicator{text-align:right;color:var(--muted);font-size:11px;min-height:17px;margin:-9px 0 10px}
.save-indicator[data-status="failed"]{color:#F87171;font-weight:700}
.storage-warning,.app-update{position:fixed;z-index:300;left:12px;right:12px;top:calc(12px + env(safe-area-inset-top,0px));background:#271725;color:#fff;padding:12px;border:2px solid #FACC15;border-radius:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;box-shadow:0 12px 45px #0009;font-size:13px;line-height:1.4}
.storage-warning span,.app-update span{flex:1 1 180px}
.storage-warning[hidden],.app-update[hidden]{display:none!important}
.app-update{top:auto;bottom:calc(88px + env(safe-area-inset-bottom,0px));background:#1F1B2E;border-color:#9333EA}
@media(max-width:920px){.mobile-nav{height:calc(71px + env(safe-area-inset-bottom,0px));padding-inline:4px}.mobile-nav button{font-size:10px;min-height:55px;padding:6px 0}.mobile-nav .nav-icon{font-size:19px}}
@media(max-width:359px){.mobile-nav button{font-size:9px}.mobile-nav .nav-icon{font-size:17px}}
@media(max-width:300px){.mobile-nav button{font-size:8px;letter-spacing:-.035em}.mobile-nav .nav-icon{font-size:16px}}