/* Keep legal access in the page footer, outside the practice controls. */
.app-legal-nav a:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:4px}
footer{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 20px}
footer>span:last-child{grid-column:2;grid-row:1;text-align:right}
.app-legal-nav{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;font-size:11px;letter-spacing:0;color:#9bb2b5}
.app-legal-nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.app-legal-nav a:hover{color:var(--cyan);text-decoration:underline;text-underline-offset:4px}
.focus-mode footer{display:grid!important}
.shop-picks-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:860px){.shop-picks-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.app-legal-nav{gap:0 18px}}
@media(max-width:480px){footer{padding-bottom:calc(112px + env(safe-area-inset-bottom))}.app-legal-nav{gap:0 14px;font-size:10px}}

/* Mobile focus: reserve the practice viewport before the legal footer. */
@media(max-width:860px){
 body.focus-mode{height:auto;min-height:var(--app-height);overflow-x:hidden;overflow-y:auto}
 .focus-mode main{flex:none;height:calc(var(--app-height) - 58px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:590px}
 .focus-mode .tempo{justify-content:flex-start;gap:5px}
 .focus-mode .tempo .number{flex:1 0 126px;height:auto;min-height:126px;max-height:210px;margin:0}
 .focus-mode .tempo .bpm{height:1.15em;line-height:1.15;font-size:clamp(84px,16dvh,108px);padding:0;flex-shrink:0}
 .focus-mode .tempo .bpm.three-digits{font-size:clamp(76px,15dvh,100px)}
 .focus-mode .tempo .unit{flex-shrink:0;position:static;margin:0;min-height:14px}
 .focus-mode .tempo .transport{position:static;flex:0 0 54px;min-height:54px;margin-top:auto}
 .focus-mode footer{flex-shrink:0;margin-top:16px;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}
@media(max-width:860px) and (max-height:650px){
 .focus-mode header{height:48px;min-height:48px}
 .focus-mode main{height:calc(var(--app-height) - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:520px}
 .focus-mode .tempo .number{flex-basis:106px;min-height:106px}
 .focus-mode .tempo .bpm{font-size:84px}
 .focus-mode .tempo .bpm.three-digits{font-size:80px}
 .focus-mode .tempo{gap:3px}
}