/* Shared finishing details across public, school, and teacher pages. */
:root{--surface-radius:12px}
[hidden]{display:none!important}
html{scroll-padding-top:24px}
body{overflow-wrap:break-word}
button:disabled{cursor:not-allowed}
input,select,textarea{font:inherit}
input[type=email]{text-transform:none}
a,button,input,select,textarea{outline-offset:4px}
.skip-link{position:fixed;left:16px;top:-80px;z-index:3000;background:var(--text);color:var(--bg);padding:12px 18px;border-radius:8px;text-decoration:none}
.skip-link:focus{top:12px}
.page-disclosure,.focus-help{border-radius:8px}
summary{cursor:pointer}
.account-section-links{flex-wrap:wrap;gap:20px}
.account-section-links a{padding-block:10px;min-height:40px}
.stats-heading,.games-heading,.wardrobe-heading{gap:20px}
.community-card,.school-card,.signin-card{overflow-wrap:anywhere}
.community-tabs button{min-height:42px}
.chat-heading h2{font-size:18px}
.chat-heading>button{min-width:36px;min-height:36px;justify-content:center}
.chat-compose{margin-top:12px}
.chat-panel input:focus-visible,.chat-panel select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body.focus .chat-dock{display:none}
.board-pages{flex-wrap:wrap;gap:12px}
.board-pages button{min-height:42px}
.school-page.home .school-main{width:min(1040px,calc(100% - 48px));margin:24px auto;padding:0 0 48px}
.school-page.home .school-welcome{display:block;min-height:0;padding:18px 0 12px;margin:0 auto 20px;text-align:center}
.school-page.home .school-welcome>img{width:52px;height:52px;margin:0 auto 10px}
.school-page.home .school-welcome h1{font-size:clamp(25px,3.2vw,36px);margin:10px 0;line-height:1.25}
.school-page.home .school-welcome p{margin:8px 0;line-height:1.6}
.school-page #school-status:empty{display:none}
.school-page .school-card{margin:14px 0;padding:24px;border-radius:12px}
.school-page .school-card h2{font-size:19px}
.school-page .school-grid{gap:20px}
.school-page .school-card button,.school-page .school-button{min-height:42px}
.school-page .school-roster th{font-size:12px;color:var(--muted)}
.school-page .school-roster td{vertical-align:middle}
.school-page .school-card details>summary{padding:10px 0;color:var(--text)}
.school-page .school-card details+select{margin-top:14px}
.school-page .school-card input{min-width:0}
.school-page .school-nav a{white-space:nowrap}
.school-page .school-nav a[aria-current=page]{color:var(--accent);border-bottom:2px solid var(--accent)}
.school-page .school-card a{color:var(--text)}
.school-page .school-welcome .teacher-entry{display:inline-block;margin-top:12px;color:var(--muted);font-size:12px;text-underline-offset:4px}
@media(max-width:700px){
 .school-page.home .school-main{width:calc(100% - 32px);margin-top:18px}
 .school-page .school-card{padding:18px}
 .school-page header{padding:16px;gap:16px;flex-wrap:wrap}
 .school-page .school-nav{width:100%;gap:18px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
 .school-page .school-nav .school-account{margin-left:auto}
 .school-page .brand strong{font-size:21px}
 .school-page .school-grid{gap:0}
 .school-page .school-roster th,.school-page .school-roster td{padding:10px 6px}
 .chat-panel{max-height:calc(100dvh - 96px)}
 .chat-history{min-height:100px;max-height:36dvh}
 .stats-heading,.games-heading{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Keep headings, lists and actions on a consistent rhythm. */
.stats-page main>h1,.games-heading,.wardrobe-heading{margin-bottom:24px}
.community-layout .community-card{border-radius:12px}
.community-view-nav{max-width:none}
.community-row .row-actions{gap:8px}
.community-row .row-actions button{padding:7px 10px}
.community-list:empty{margin:0}
.school-page .school-pin{line-height:1.7}
@media(max-width:500px){.school-code{font-size:18px;letter-spacing:.12em}}

/* Achievement collection: crisp, distinct enamel-style insignia. */
.badge-grid{grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}
.achievement{padding:22px 18px;gap:18px;align-items:center;background:var(--bg)}
.achievement.earned{background:color-mix(in srgb,var(--key) 45%,var(--bg));border-color:var(--line)}
.badge-medal{width:64px;flex:0 0 64px;filter:drop-shadow(0 3px 2px #0002)}
.badge-medal svg{display:block;width:64px;height:72px}
.achievement.locked .badge-medal{filter:grayscale(1);opacity:.45}
.achievement>div{min-width:0;flex:1}.achievement h3{font-size:16px;line-height:1.4}
.achievement small:first-child{text-transform:uppercase;letter-spacing:.08em;font-size:10px}
.achievement progress{height:5px;border:0;border-radius:4px;overflow:hidden}
.badge-popup .badge-medal{width:48px;flex-basis:48px}.badge-popup .badge-medal svg{width:48px;height:54px}
@media(max-width:400px){.badge-grid{grid-template-columns:1fr}.achievement{padding:16px 12px;gap:12px}}

.badge-more{margin-top:18px;padding:10px 18px}.achievement .badge-tier{color:var(--muted)}.achievement.earned[data-tier="diamond"]{border-color:#8fbac5}.achievement.earned[data-tier="diamond"] .badge-tier{color:#8fbac5}.achievement.earned[data-tier="platinum"]{border-color:#9fa8ba}.achievement.earned[data-tier="gold"]{border-color:#b79650}body.light .achievement.earned[data-tier="diamond"] .badge-tier{color:#376a77}

header nav .badges-trigger{padding:8px;margin-right:8px;min-width:36px;min-height:36px;justify-content:center;border-radius:8px}header nav .badges-trigger[aria-expanded="true"]{color:var(--accent);background:var(--key)}
.badge-dropdown{position:fixed;inset:86px 24px auto auto;margin:0;width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 110px);overflow:auto;overscroll-behavior:contain;background:var(--bg);color:var(--text);padding:22px;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 60px #0005;font:13px Plex,monospace}
.badge-dropdown:popover-open{display:block;animation:badge-drop .2s ease-out}.badge-dropdown .badge-grid{grid-template-columns:1fr}.badge-dropdown .achievement{padding:12px 16px}.badge-dropdown .badge-medal,.badge-dropdown .badge-medal svg{width:46px;height:54px}.badge-dropdown .badge-medal{flex-basis:46px}.badge-dropdown .badge-heading{gap:12px}.badge-dropdown .badge-heading>span{margin-left:auto;font-size:16px}.badge-dropdown-close{font-size:24px;min-width:32px;min-height:32px;justify-content:center}.badge-dropdown .achievement p{margin:4px 0}.badge-dropdown::backdrop{background:transparent}
@keyframes badge-drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.badge-dropdown{inset:76px 16px auto auto;padding:16px;max-height:calc(100dvh - 92px)}header nav .badges-trigger{margin-right:2px;padding:5px;min-width:30px}.compact-header .nav-window{max-width:calc(100vw - 264px)}}
@media(prefers-reduced-motion:reduce){.badge-dropdown:popover-open{animation:none}}

.badge-filters{display:flex;flex-wrap:wrap;gap:14px}.badge-category-heading{grid-column:1/-1;margin:18px 0 0;padding-bottom:10px;border-bottom:1px solid var(--line);font-size:16px;color:var(--text)}.badge-rules{font-size:11px;color:var(--muted);line-height:1.6}.achievement.locked{background:color-mix(in srgb,var(--key) 25%,var(--bg));border-style:dashed}.achievement.locked h3{color:var(--muted)}

.profile-reactions{margin:24px 0;padding:20px;border:1px solid var(--line);border-radius:12px;scroll-margin-top:24px}.profile-reactions h2{font-size:18px;margin:0 0 14px}.profile-reaction-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.profile-reaction-actions select{max-width:100%;padding:10px;background:var(--key);color:var(--text);border:1px solid var(--line);border-radius:6px}.heart-button{padding:7px 10px;border:1px solid var(--line);border-radius:20px;white-space:nowrap}.heart-button[aria-pressed="true"]{color:#df766e;border-color:#df766e;background:color-mix(in srgb,#df766e 10%,var(--bg))}.heart-button:disabled{cursor:default}.profile-emojis{display:flex;gap:8px;margin:14px 0}.profile-emojis button{padding:8px;border:1px solid var(--line);border-radius:8px;font-size:20px}.profile-comment{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 0;border-top:1px solid var(--line)}.profile-comment>a{color:var(--accent)}.profile-comment>button{margin-left:auto}.profile-comments{margin-top:16px;max-height:300px;overflow:auto}.test-hearts{min-width:80px}tr[id^="test-"]:target{outline:2px solid var(--accent);outline-offset:-2px}

.badge-heart{display:flex;margin-top:10px;font-size:12px;padding:5px 10px}