/* /tierliste – S–F tier board on the Guildbound v3 tokens (design-v3.css).
   Only the tier letter fields carry the approved classic S–F colours. */
.tl-page{--tl-ink:#1a1209;--tl-active:linear-gradient(#2a2116,#1a140d);max-width:1120px;margin:28px auto 72px;padding:0 24px;box-sizing:border-box;font:400 16px/1.5 var(--gb-font-text,"Source Sans 3",sans-serif);color:var(--gb-text,#e6dcc6)}
.tl-page *,.tl-page *::before,.tl-page *::after{box-sizing:border-box}
.tl-page [hidden]{display:none!important}
.tl-page a{color:var(--gb-link,#e0b860)}
.tl-page a:focus-visible,.tl-page summary:focus-visible{outline:none;box-shadow:var(--gb-focus,0 0 0 2px #14100c,0 0 0 4px #95e5df);border-radius:3px}
.tl-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.tl-crumb{font-size:14px;color:var(--gb-muted,#b5a789)}
.tl-crumb a{display:inline-block;padding:10px 0;min-height:44px}
.tl-head h1{margin:2px 0 8px;font-size:34px;line-height:1.15;color:var(--gb-title,#efe6d2)}
.tl-lead{margin:0 0 24px;max-width:72ch;color:var(--gb-muted,#b5a789)}

/* Selection: content as window tabs, role as leather segment; active = leather + gold. */
.tl-controls{display:flex;flex-direction:column;gap:16px;margin-bottom:14px}
.tl-contents{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--gb-brass-line,#5e4a28)}
.tl-content-tab{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;margin-right:-1px;font-family:var(--gb-font-display,"Marcellus",serif);-webkit-text-stroke:var(--gb-display-stroke-small,.3px) currentColor;font-size:16px;text-decoration:none;color:var(--gb-muted,#b5a789)!important;background:#120e0a;border:1px solid var(--gb-brass,#8a6d36);border-bottom:0;border-radius:3px 3px 0 0}
.tl-content-tab:hover{color:var(--gb-text,#e6dcc6)!important;background:#1a1510}
.tl-content-tab[aria-current]{position:relative;top:1px;color:var(--gb-gold-text,#f2cf7a)!important;background:var(--tl-active);border-color:var(--gb-gold,#c9a24e);box-shadow:inset 0 2px 0 var(--gb-gold,#c9a24e)}
.tl-roles{display:inline-grid;grid-template-columns:repeat(3,minmax(0,1fr));align-self:flex-start;border:1px solid var(--gb-brass,#8a6d36);border-radius:var(--gb-r-control,3px);box-shadow:0 0 0 1px #000;overflow:hidden}
.tl-role{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;font-family:var(--gb-font-display,"Marcellus",serif);-webkit-text-stroke:var(--gb-display-stroke-small,.3px) currentColor;font-size:16px;text-decoration:none;color:#d6cbb3!important;background:#18120b;border-right:1px solid #3a2f1d;white-space:nowrap}
.tl-role:last-child{border-right:0}
.tl-role:hover{background:var(--gb-leather-hover,#2e2418);color:#f2e3c0!important}
.tl-role[aria-current]{color:var(--gb-gold-text,#f2cf7a)!important;background:var(--tl-active);box-shadow:inset 0 0 0 1px var(--gb-gold,#c9a24e),inset 0 -2px 0 var(--gb-gold,#c9a24e)}
.tl-role:focus-visible{box-shadow:inset 0 0 0 2px var(--gb-soul,#95e5df)!important;border-radius:0!important}
.tl-role-icon{flex:none;width:22px;height:22px;background:url('/assets/blizzard-roles/role-sprite.png') no-repeat;background-size:84.06px 84.06px}
.tl-role-icon--tank{background-position:0 -22px}.tl-role-icon--healer{background-position:-22px 0}.tl-role-icon--damage{background-position:-22px -22px}
.tl-role-count{font:600 13px/1 var(--gb-font-text,"Source Sans 3",sans-serif);-webkit-text-stroke:0;color:var(--gb-muted,#b5a789);padding:3px 6px;border:1px solid #3a2f1d;border-radius:2px}
.tl-role[aria-current] .tl-role-count{color:var(--gb-gold-text,#f2cf7a);border-color:var(--gb-brass,#8a6d36)}

.tl-standing{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 22px;font-size:14px;color:var(--gb-muted,#b5a789)}

/* Board */
.tl-board-title{margin:0 0 12px;font:400 20px/1.3 var(--gb-font-display,"Marcellus",serif);-webkit-text-stroke:var(--gb-display-stroke-small,.3px) currentColor;color:var(--gb-title,#efe6d2)}
.tl-board-title span{display:block;margin-top:2px;font:400 14px/1.4 var(--gb-font-text,"Source Sans 3",sans-serif);-webkit-text-stroke:0;color:var(--gb-muted,#b5a789)}
.tl-board{border:1px solid var(--gb-brass-line,#5e4a28);border-radius:var(--gb-r-panel,4px);overflow:hidden;background:var(--gb-panel,#1a1714);box-shadow:var(--gb-shadow-1,0 6px 16px rgba(0,0,0,.35))}
.tl-tier{display:grid;grid-template-columns:88px minmax(0,1fr);min-height:84px;border-bottom:1px solid var(--gb-brass-line,#5e4a28)}
.tl-tier:last-child{border-bottom:0}
.tl-tier.is-empty{min-height:56px}
.tl-letter{display:flex;align-items:center;justify-content:center;margin:0;background:var(--tl-tier);color:var(--tl-ink);font:400 36px/1 var(--gb-font-display,"Marcellus",serif);-webkit-text-stroke:.6px currentColor;border-right:1px solid rgba(0,0,0,.45)}
.tl-tier.is-empty .tl-letter{font-size:28px}
.tl-tier--s{--tl-tier:#d97c72}.tl-tier--a{--tl-tier:#dd9f62}.tl-tier--b{--tl-tier:#d9c06a}
.tl-tier--c{--tl-tier:#b6c26c}.tl-tier--d{--tl-tier:#84b98c}.tl-tier--f{--tl-tier:#7ea6c4}
.tl-items{display:flex;flex-wrap:wrap;align-content:center;gap:8px;margin:0;padding:10px;list-style:none;min-width:0}
.tl-none{display:flex;align-items:center;margin:0;padding:0 16px;font-size:14px;color:var(--gb-quiet,#9a8f7c)}
.tl-entry{display:flex;align-items:center;gap:10px;flex:0 1 228px;min-width:0;min-height:60px;padding:8px 12px 8px 8px;background:#120e0a;border:1px solid #3a2f1d;border-left:3px solid var(--tl-class);border-radius:3px}
.tl-icon{position:relative;flex:none;display:block;width:40px;height:40px;margin:0 4px 4px 0}
.tl-icon>img:first-child{display:block;width:100%;height:100%;border-radius:3px;border:1px solid #000;box-shadow:0 0 0 1px var(--gb-brass-line,#5e4a28)}
/* Class icon as a small mark on the spec icon. */
.tl-class-badge{position:absolute;right:-5px;bottom:-5px;width:18px;height:18px;border-radius:50%;border:1px solid var(--tl-class);box-shadow:0 0 0 1px #000,0 1px 3px rgba(0,0,0,.6)}
.tl-entry-text{min-width:0}
.tl-entry strong{display:block;font-size:16px;font-weight:600;line-height:1.25;color:var(--gb-text,#e6dcc6);overflow-wrap:anywhere}
.tl-entry small{display:block;margin-top:2px;font-size:13px;color:var(--gb-muted,#b5a789)}
.tl-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin:10px 0 0;font-size:13px;color:var(--gb-muted,#b5a789)}
.tl-legend b{font-family:var(--gb-font-display,"Marcellus",serif);font-weight:400;color:var(--gb-text,#e6dcc6)}

/* Empty, invalid and unavailable states */
.tl-state{max-width:720px}
.tl-state p{margin:0 0 14px;max-width:68ch}
.tl-state .gb-btn{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}

.tl-about{margin:32px 0 0;max-width:72ch;border-top:1px solid var(--gb-rule,rgba(184,145,63,.18))}
.tl-about summary{display:flex;align-items:center;min-height:44px;cursor:pointer;color:var(--gb-link,#e0b860);font-weight:600}
.tl-about p{margin:4px 0 0;color:var(--gb-muted,#b5a789)}
.tl-next{margin:12px 0 0}
.tl-next a{display:inline-flex;align-items:center;min-height:44px}

/* Restrained update feedback: the board fades in after a selection change, no movement. */
.tl-result.is-entering :is(.tl-board,.tl-state){animation:tl-enter .18s ease-out}
@keyframes tl-enter{from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.tl-result.is-entering :is(.tl-board,.tl-state){animation:none}}

@media (max-width:760px){
 .tl-page{padding:0 16px;margin-top:20px}
 .tl-head h1{font-size:28px}
 .tl-tier{grid-template-columns:52px minmax(0,1fr);min-height:64px}
 .tl-letter{font-size:28px}.tl-tier.is-empty .tl-letter{font-size:22px}
 .tl-items{padding:8px;gap:6px}
 .tl-entry{flex-basis:100%;min-height:52px;padding:6px 10px 6px 6px}
 .tl-icon{width:34px;height:34px}
 .tl-none{padding:0 12px}
}
@media (max-width:520px){
 .tl-contents{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;border-bottom:0}
 .tl-content-tab{justify-content:center;margin:0;padding:0 8px;border-bottom:1px solid var(--gb-brass,#8a6d36);border-radius:3px}
 .tl-content-tab[aria-current]{top:0;box-shadow:inset 0 -2px 0 var(--gb-gold,#c9a24e)}
 .tl-roles{display:grid;align-self:stretch}
 .tl-role{gap:6px;padding:0 6px;font-size:15px}
 .tl-role-icon{width:18px;height:18px;background-size:68.78px 68.78px}
 .tl-role-icon--tank{background-position:0 -18px}.tl-role-icon--healer{background-position:-18px 0}.tl-role-icon--damage{background-position:-18px -18px}
 .tl-role-count{padding:2px 4px;font-size:12px}
}
/* Phones from 360 px: two compact columns (icon + name) keep the board short. */
@media (min-width:360px) and (max-width:760px){
 .tl-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .tl-entry{gap:7px;min-height:48px;padding:5px 6px 5px 5px}
 .tl-icon{width:30px;height:30px}
 .tl-class-badge{width:16px;height:16px;right:-4px;bottom:-4px}
 .tl-entry strong{font-size:14px;hyphens:auto;overflow-wrap:break-word}
 .tl-entry small{font-size:13px;line-height:1.2}
}
@media (max-width:359px){.tl-role-icon{display:none}}