/* Adapt spacing to the usable browser height, without shrinking or clipping the page. */
body{min-width:320px;min-height:100svh}
header{height:clamp(60px,10svh,88px);padding-inline:clamp(20px,4vw,64px);gap:20px}
main,.home main,.home .run-main{width:min(1120px,calc(100% - 64px));margin-inline:auto}
.home .run-main{max-width:880px}
main>*{min-width:0}
.home main{padding-block:clamp(20px,4svh,48px)}
.home-heading{margin-bottom:clamp(16px,3svh,32px)}
.home-welcome{margin-bottom:clamp(24px,4svh,48px)}
.login-area{min-height:0;padding:clamp(22px,4svh,40px) 24px}
.login-button{min-height:64px;padding:18px 26px;font-size:24px}
.home-words p{font-size:clamp(18px,1.8vw,26px);line-height:1.65}
.home-words p>span{line-height:42px}
.home-words{padding:6px 0 20px}
.home-caption{padding-top:16px;flex-wrap:wrap}
.home .signin-main{padding-block:clamp(16px,3svh,36px)}
.signin-card{padding:clamp(20px,3svh,36px) 28px}
.signin-card h1{margin-block:16px 10px}
.signin-card p{margin-block:10px}
#google-signin{margin-top:20px}
.signin-divider{margin-block:20px}
.signin-card .signin-note{margin-block:16px}
.signin-card #email-status{min-height:0;margin-block:12px}
.run-numbers{padding-block:clamp(18px,3svh,32px)}
.run-numbers strong{font-size:clamp(48px,9svh,80px)}
.run-kind{margin-top:20px;padding-bottom:12px}
.run-details{padding-block:18px}
.run-actions{margin-top:24px}
.save-run{margin-top:24px;padding:20px}
#run-save-status{margin-top:16px}
dialog{max-height:calc(100svh - 32px);overflow:auto}
/* Wide, short laptops: keep the welcome and passage visible together. */
@media(min-width:1000px) and (max-height:900px){
 .landing main{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.4fr);gap:40px;align-items:start;padding-top:clamp(28px,6svh,64px)}
 .landing .home-welcome{margin:0}.landing .home-heading{min-height:90px;align-items:flex-start;flex-direction:column;gap:16px}
 .landing h1{font-size:25px}.landing h2{font-size:22px}.landing .home-passage .home-heading{min-height:142px}
 .landing .login-area{padding:32px 16px}.landing .login-button{font-size:20px;padding-inline:18px;gap:14px}
 .landing .home-words p{font-size:18px;padding-left:28px;line-height:1.65}.landing .home-words p>span{line-height:30px}
 .landing .home-caption{gap:12px;font-size:10px}
}
@media(min-width:900px){
 .practice-page .setup{height:auto;padding-block:clamp(16px,3svh,28px)}
 .practice-page .config{margin-top:14px;min-height:38px;gap:16px;flex-wrap:wrap}
 .practice-page .status{height:clamp(58px,9svh,76px)}
 .practice-page .typing-area{height:clamp(138px,23svh,220px)}
 .practice-page .actions{height:clamp(54px,9svh,80px)}
 .practice-page .details{height:clamp(74px,12svh,106px);gap:16px}
 .practice-page footer{height:clamp(78px,13svh,130px);padding-block:16px}
 .practice-page .pace{gap:16px}.practice-page .chart{width:150px}.practice-page .chart canvas,.practice-page .chart img{max-width:100%}
 .practice-page .groups{gap:10px}.practice-page .buttons button{padding-inline:10px}.practice-page .options{gap:14px}
}
@media(min-width:900px) and (max-height:700px){
 .signin-card{padding:16px 24px}.signin-card h1{font-size:23px;margin-block:10px 6px}.signin-card p{font-size:12px;line-height:1.6;margin-block:8px}
 #google-signin{margin-top:14px}.signin-divider{margin-block:14px}.email-signin input{padding:10px;margin-bottom:8px}.email-submit{padding:11px 14px}.signin-card .signin-note{margin-block:12px;font-size:10px}
 .home .run-main{padding-block:20px}.home .run-main h1{font-size:28px;margin-top:10px}.run-subtitle{margin-block:8px}
 .run-kind{margin-top:14px}.run-numbers{padding-block:16px;gap:20px}.run-numbers>div{gap:8px}.run-details{padding-block:14px}.run-details dd{margin-top:8px;font-size:20px}
 .run-actions{margin-top:18px}.again-button{padding:12px 20px}.save-run{margin-top:18px;padding:16px}#run-save-status{margin-block:12px}
 .practice-page #passage{font-size:24px;line-height:44px}.practice-page .line-numbers{line-height:44px}.practice-page .count>span{font-size:40px}
}
@media(max-width:899px){
 header{height:auto;min-height:64px;padding-block:14px;flex-wrap:wrap;gap:14px}.brand small{display:none}nav{gap:18px}
 main,.home main,.home .run-main{width:calc(100% - 40px)}
 .setup{height:auto;padding-block:22px}.config,.groups{flex-wrap:wrap;gap:12px}.config{margin-top:18px}.options{flex-wrap:wrap}
 .heading{flex-wrap:wrap}.details{height:auto;flex-wrap:wrap;padding-block:20px}.details>i{display:none}.pace{width:100%;justify-content:space-between}
 .home-heading{align-items:flex-start;flex-direction:column;gap:18px}.home-welcome{margin-bottom:28px}
 .home-words p{font-size:19px;padding-left:28px}.home-words p>span{line-height:32px}.home-caption{gap:12px}
 footer{height:auto;gap:24px;padding-block:24px}.footer-links{flex-wrap:wrap;gap:20px}.shortcuts{flex-wrap:wrap}
 .save-run{flex-wrap:wrap}.save-run a{white-space:normal}.signin-card{max-width:500px;padding-inline:20px}
}
@media(max-width:480px){
 header{padding-inline:16px}.home header{padding-inline:16px}main,.home main,.home .run-main{width:calc(100% - 32px);margin-inline:auto}
 .brand strong{font-size:20px}.mark{width:30px;height:30px}nav{gap:14px}.home nav{gap:14px}.brand{gap:8px}
 .buttons button{padding-inline:10px}.metrics{gap:12px}.metrics b{font-size:22px}.count{gap:8px}.count>span{font-size:34px}.activity{display:none}
 .actions{gap:12px}.actions>small{max-width:44%;overflow-wrap:anywhere}.actions>button:last-child{font-size:10px}
 .pace{gap:12px}.chart{width:130px}.chart img,.chart canvas{max-width:100%}.login-button{font-size:20px;gap:16px;padding-inline:16px}
 .run-details{gap:12px}.run-details dt{font-size:10px}.run-details dd{font-size:18px}.signin-card{padding-inline:16px}
}
@media(min-width:900px){.practice-page footer{height:clamp(64px,11svh,110px);padding-block:12px}.practice-page .details>div:last-child{display:flex;flex-direction:column;align-items:flex-start}}
@media(min-width:1000px) and (max-height:700px){.landing main{padding-top:24px;gap:32px}.landing .home-passage .home-heading{min-height:120px}.landing .home-words p{font-size:17px}}