/* Mobile controls reserve their own footer space; existing themes stay intact. */
.tg-ui .input-guidance{font-size:12px;line-height:1.5;color:var(--op-muted);margin:8px 0 0;overflow-wrap:anywhere}
@media(max-width:760px){
 html body.tg-ui{padding-bottom:calc(max(80px,var(--mobile-control-space,80px)) + env(safe-area-inset-bottom))!important}
 html body.tg-ui .theme-switch{right:max(8px,env(safe-area-inset-right))!important;bottom:max(8px,env(safe-area-inset-bottom))!important;top:auto!important;left:auto!important;max-width:calc(100vw - 24px);z-index:36}
 html body.tg-ui .theme-switch summary{min-height:44px;display:flex;align-items:center;padding:8px 12px;box-sizing:border-box;font-size:11px}
 html body.tg-ui .theme-switch nav{position:absolute;right:0;bottom:calc(100% + 8px);width:min(260px,calc(100vw - 24px));padding:8px;background:var(--op-surface);border:1px solid var(--op-border);border-radius:12px;box-shadow:0 8px 30px #0004}
 html body.tg-ui #study-clock{inset:auto auto max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;width:min(214px,calc(100vw - 125px))!important;gap:4px!important;padding:5px 7px!important;grid-template-columns:1fr auto auto!important;z-index:35}
 html body.tg-ui #study-clock .clock-handle{display:none!important}
 html body.tg-ui #study-clock #timer-display{grid-row:1!important;grid-column:1!important;font-size:16px!important;letter-spacing:0!important;white-space:nowrap}
 html body.tg-ui #study-clock #timer-toggle{grid-row:1!important;grid-column:2!important;font-size:10px!important;white-space:nowrap;min-height:44px!important;padding:4px!important}
 html body.tg-ui #study-clock #clock-expand{grid-row:1!important;grid-column:3!important;min-height:44px!important;min-width:28px!important;padding:3px!important}
 html body.tg-ui #study-clock[data-expanded=true] .timer-tabs{grid-row:2!important;grid-column:1/-1!important;flex-wrap:wrap}
 html body.tg-ui #study-clock[data-expanded=true] :is(#timer-reset,#clock-home){min-height:44px!important}
 html body.tg-ui #study-clock[data-expanded=true]{max-height:calc(100dvh - 100px);overflow:auto}
 html body.tg-ui #study-clock #clock-home{display:none!important}
 html body.tg-ui:has(input:not([type=hidden]):focus,textarea:focus,select:focus) :is(.theme-switch,#study-clock){visibility:hidden!important}
 html body.tg-ui .focus-layout{height:calc(100dvh - 95px - var(--focus-clock-height,80px))!important}
 html body.tg-ui .main,html body.tg-ui .operations-main{padding-bottom:90px!important}
}