/* 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}}

.mode-description{font-size:11px;color:var(--muted);margin:0;line-height:1.6;max-width:310px}#modes button{min-height:40px;padding-inline:20px}#modes .selected{color:var(--text);border-color:var(--accent)}

@media(max-width:800px){.practice-page #profile{display:inline-flex}.practice-page #profile span{font-size:11px}}

.community-nav{color:var(--muted);text-decoration:none;font-size:12px}.community-nav:hover{color:var(--text)}.practice-page header nav{flex-wrap:wrap;gap:20px}@media(max-width:600px){.practice-page header nav{gap:14px}}

/* TypeToad mascot */
header .brand .mark{width:44px;height:44px;background:transparent;border-radius:0;flex-shrink:0}header .brand .mark img{width:100%;height:100%;object-fit:contain}@media(max-width:480px){header .brand .mark{width:36px;height:36px}}

/* Consistent current-page indicator across every navigation. */
header nav [aria-current="page"],.home header nav [aria-current="page"]{color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:8px}
.practice-page footer{border-top:1px solid var(--line)}

/* A filled highlight and solid marker keep mistakes visible, including spaces. */
#passage .incorrect{color:#ffb4a9;background:#672d2a;text-decoration:none;box-shadow:inset 0 -3px 0 #ff8b7b;border-radius:2px}
body.light #passage .incorrect{color:#8f1d18;background:#ffd9d2;box-shadow:inset 0 -3px 0 #b52c23}

.mode-copy{display:flex;flex-direction:column;gap:8px;align-items:flex-end}#manage-tricky{font-size:11px;color:var(--accent);text-decoration:underline;text-underline-offset:3px}.tricky-list{max-height:300px;overflow:auto;margin:20px 0}.tricky-list>div{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line);padding:12px 0}.tricky-list button{font-size:11px;text-decoration:underline}.practice-page .config{gap:16px;flex-wrap:wrap}@media(max-width:800px){.mode-copy{align-items:flex-start}#modes button{padding-inline:12px}}

/* One navigation layout on every page. */
header nav[aria-label="Main navigation"],.home header nav[aria-label="Main navigation"]{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
header nav[aria-label="Main navigation"] a,.home header nav[aria-label="Main navigation"] a{font-size:13px;color:var(--muted);text-decoration:none;padding:0 0 8px;border-bottom:2px solid transparent;white-space:nowrap}
header nav[aria-label="Main navigation"] a:hover{color:var(--text)}
header nav[aria-label="Main navigation"] a[aria-current="page"],.home header nav[aria-label="Main navigation"] a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
.practice-page #settings{font-size:12px;gap:8px}.practice-page #settings img{width:16px;height:16px}
@media(max-width:1050px){header{height:auto;min-height:72px;flex-wrap:wrap;padding-block:14px;gap:14px}header .brand small{display:none}}
@media(max-width:600px){header nav[aria-label="Main navigation"],.home header nav[aria-label="Main navigation"]{gap:14px;width:100%}header nav[aria-label="Main navigation"] a,.home header nav[aria-label="Main navigation"] a{font-size:12px}}