/* Tier list components, shared by the tier list and the three role posts (render.py). Colours come from the Content UI Kit
   tokens (--mcui-*); tier colours follow WoW item quality and are named --wow-*. The blog layout owns tables. */
.blog-wrapper { --wow-tier-s: oklch(0.76 0.17 55); --wow-tier-a: oklch(0.72 0.17 305); --wow-tier-b: oklch(0.72 0.12 245); }
.blog-wrapper :is(p, li, td) { text-wrap: pretty; }
.blog-wrapper .tl-table tbody th { inline-size: 6.5rem; vertical-align: top; }
.tl-tier { display: inline-grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border: 1px solid currentColor; border-radius: var(--mcui-radius-sm, 4px); font-weight: 800; }
.tl-s { color: var(--wow-tier-s); }
.tl-a { color: var(--wow-tier-a); }
.tl-b { color: var(--wow-tier-b); }
.tl-tier-text { display: block; margin-block-start: 0.3rem; font-size: 0.8125rem; white-space: nowrap; font-weight: 400; color: var(--mcui-muted, oklch(0.77 0.035 275)); }
.blog-layout .blog-wrapper ul.tl-specs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.blog-layout .blog-wrapper .tl-specs li { margin: 0; list-style: none; padding: 0.2rem 0.55rem; border: 1px solid var(--mcui-line, oklch(0.8 0.03 275 / 0.12)); border-radius: var(--mcui-radius-sm, 4px); background: var(--mcui-sunken, oklch(0.22 0.025 275)); color: var(--mcui-ink, oklch(0.96 0.01 275)); font-size: 0.875rem; line-height: 1.5; hyphens: manual; }
.tl-tuned { font-size: 0.75rem; color: var(--mcui-muted, oklch(0.77 0.035 275)); white-space: nowrap; }
.tl-up::before { content: "▲ "; }
.tl-down::before { content: "▼ "; }
/* Phones: a narrower tier column leaves room for two chips a line; 4.75rem still fits «Top-Wahl» on one line. */
@media (width < 640px) { .blog-wrapper .tl-table tbody th { inline-size: 4.75rem; } .tl-tier-text { font-size: 0.75rem; } .blog-layout .blog-wrapper .tl-specs li { font-size: 0.8125rem; padding-inline: 0.45rem; } }