/* Spec statistics (/spec-stats/<mode>). Builds on home-v2.css; scoped to .ss-main. */
.spec-stats-body{background:#060708 radial-gradient(circle at 82% 4%,rgba(90,52,139,.22),transparent 34%) no-repeat!important}
.ss-main{color:#f5f4f8}
.ss-main .v2-kicker{font-size:12px}
.ss-main .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Class colours (profiles.CLASS_COLORS) */
.cls-DEATHKNIGHT{--class:#C41E3A;--ink:#fff}.cls-DEMONHUNTER{--class:#A330C9;--ink:#fff}.cls-DRUID{--class:#FF7C0A;--ink:#0b0b10}
.cls-EVOKER{--class:#33937F;--ink:#fff}.cls-HUNTER{--class:#AAD372;--ink:#0b0b10}.cls-MAGE{--class:#3FC7EB;--ink:#0b0b10}
.cls-MONK{--class:#00FF98;--ink:#0b0b10}.cls-PALADIN{--class:#F48CBA;--ink:#0b0b10}.cls-PRIEST{--class:#FFFFFF;--ink:#0b0b10}
.cls-ROGUE{--class:#FFF468;--ink:#0b0b10}.cls-SHAMAN{--class:#0070DD;--ink:#fff}.cls-WARLOCK{--class:#8788EE;--ink:#0b0b10}
.cls-WARRIOR{--class:#C69B6D;--ink:#0b0b10}

/* Spec icon: initials underneath, game icon on top when it loads. */
.ss-icon{position:relative;display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;border-radius:3px;overflow:hidden;background:var(--class,#aab6c5);color:var(--ink,#0b0b10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font-weight:800;letter-spacing:-.03em}
.ss-icon b{font-weight:800}
.ss-icon img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ss-icon-26{width:26px;height:26px;font-size:11px}
.ss-icon-32{width:32px;height:32px;font-size:13px}
.ss-icon-52{width:52px;height:52px;font-size:20px}

/* Hero */
.ss-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:56px;align-items:end;padding:72px 12px 56px}
.ss-hero h1{margin:18px 0 22px;font-size:clamp(56px,7vw,104px)!important;line-height:.9!important;letter-spacing:-.075em!important}
.ss-hero-copy>p{max-width:540px;margin:0;font-size:18px;line-height:1.6;color:#aaaaba}
.ss-modes{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.ss-mode{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid #30313c;border-radius:3px;background:#0b0c10;color:#d9d9e4;font-weight:700;font-size:15px;text-decoration:none}
.ss-mode:hover{border-color:#b9a4f3;color:#fff}
.ss-mode.is-on{background:#c5adff;border-color:#c5adff;color:#0b0b10}
.ss-field{border:1px solid #272832;background:linear-gradient(145deg,#1b1530,#0a0b0e);padding:30px 30px 26px}
.ss-field h2{margin:12px 0 6px!important;font-size:34px!important;line-height:1.05!important;letter-spacing:-.05em!important}
.ss-field>p{margin:0;color:#aaaaba;font-size:14px}
.ss-field-bar{display:flex;gap:2px;height:44px;margin-top:22px}
.ss-field-bar i{display:block;height:100%;background:var(--class);flex:1 1 0}
.ss-field-bar .ss-field-rest{background:repeating-linear-gradient(135deg,#2a2b36 0 4px,#1a1b23 4px 8px)}
.ss-field-key{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px}
.ss-field-key li{display:flex;align-items:center;gap:10px;font-size:14px;min-width:0}
.ss-field-key i{width:10px;height:10px;flex:0 0 10px;background:var(--class)}
.ss-field-key span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-field-key b{font-variant-numeric:tabular-nums}

/* Summary strip, as the homepage signal strip */
.ss-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #272832;border-bottom:1px solid #272832}
.ss-strip>div{padding:21px 18px;border-right:1px solid #272832;min-width:0}
.ss-strip>div:last-child{border-right:0}
.ss-strip span{display:block;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#9a9cab}
.ss-strip strong{display:block;margin-top:6px;font-family:Montserrat,Inter,sans-serif;font-size:28px;font-weight:650;letter-spacing:-.04em;line-height:1.15}

/* Sections */
.ss-section{padding:80px 12px 0}
.ss-section h2{font-size:clamp(38px,4vw,56px)!important;line-height:.98!important;letter-spacing:-.065em!important;margin:10px 0 0!important}
.ss-section .v2-section-heading p{margin:12px 0 0;font-size:15px;color:#aaaaba}
.ss-cols{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px}
.ss-panel{border:1px solid #272832;background:linear-gradient(135deg,#111217,#090a0d);padding:26px 28px;min-width:0}
.ss-note,.ss-empty{margin:18px 0 0;font-size:13px;color:#9a9cab}
.ss-chart-toggle{display:flex;gap:22px}
.ss-chart-toggle button{min-height:40px;padding:0 0 4px;border:0;border-bottom:2px solid transparent;background:none;color:#9a9cab;font:700 15px Inter,sans-serif;cursor:pointer}
.ss-chart-toggle button:hover{color:#fff}
.ss-chart-toggle button[aria-pressed="true"]{color:#fff;border-bottom-color:#b9a4f3}

/* Bars */
.ss-chart{display:flex;flex-direction:column;gap:6px}
.ss-bar{display:grid;grid-template-columns:230px minmax(0,1fr) 64px;gap:16px;align-items:center;min-height:36px}
.ss-bar>b{text-align:right;font-variant-numeric:tabular-nums;font-weight:800;font-size:15px}
.ss-bar-label{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-scale{min-height:20px;font-size:13px;color:#9a9cab}
.ss-scale-labels{display:flex;justify-content:space-between}
.ss-scale-labels b{color:#f5f4f8}
.ss-repr-track,.ss-wr-track,.ss-split-track{position:relative;display:inline-block;height:6px;background:#16171f}
.ss-repr-track{width:90px}
.ss-wr-track{width:70px}
.ss-repr-lg,.ss-wr-lg{width:auto;height:12px;display:block}
.ss-repr-fill,.ss-wr-fill,.ss-split-fill{position:absolute;top:0;bottom:0;left:0;width:0}
.ss-repr-fill{background:var(--class)}
.ss-wr-fill.up,.ss-split-fill.up{background:#b9a4f3}
.ss-wr-fill.down,.ss-split-fill.down{background:#6b6d82}
.ss-mid{position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:#8e8fa3}

/* Selected spec */
.ss-spot{border-left:2px solid #b9a4f3;background:linear-gradient(145deg,#1b1530,#0a0b0e);scroll-margin-top:24px}
.ss-spot-head{display:flex;align-items:center;gap:14px;margin:16px 0 18px}
.ss-spot-head h3{margin:0!important;font-size:24px!important;line-height:1.1!important;letter-spacing:-.04em!important}
.ss-spot-head p{margin:2px 0 0;font-size:14px;color:#aaaaba}
.ss-spot-rate{font-family:Montserrat,Inter,sans-serif;font-size:64px;font-weight:650;letter-spacing:-.06em;line-height:1}
.ss-spot-sub{margin:8px 0 0;font-size:14px;color:#aaaaba}
.ss-spot-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0 0;padding-top:18px;border-top:1px solid #30313c}
.ss-spot-facts dt{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#9a9cab}
.ss-spot-facts dd{margin:4px 0 0;font-size:18px;font-weight:700}
.ss-splits{margin-top:22px;padding-top:18px;border-top:1px solid #30313c}
.ss-splits h4{margin:0;font-size:15px}
.ss-splits ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.ss-splits li{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:14px}
.ss-splits li small{color:#9a9cab;font-size:13px}
.ss-splits li b{font-variant-numeric:tabular-nums}
.ss-split-track{grid-column:1 / -1;display:block;width:100%}
.ss-splits p{margin:14px 0 0;font-size:13px;color:#9a9cab}

/* Table */
.ss-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.ss-filters label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#9a9cab}
.ss-filters input,.ss-filters select{height:44px;box-sizing:border-box;padding:0 12px;border:1px solid #30313c;border-radius:3px;background:#0b0c10;color:#f5f4f8;font:500 15px Inter,sans-serif;letter-spacing:0;text-transform:none}
.ss-filters input{width:220px}
.ss-apply{height:44px;padding:0 16px;border:1px solid #30313c;border-radius:3px;background:#0b0c10;color:#f5f4f8;font:700 14px Inter,sans-serif;cursor:pointer}
.js .ss-apply{display:none}
.ss-table-wrap{margin-top:26px;border-top:1px solid #272832;border-bottom:1px solid #272832;overflow-x:auto}
.ss-table{width:100%;min-width:880px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ss-table th,.ss-table td{padding:6px 16px;border-bottom:1px solid #1b1c24;text-align:right;font-size:15px;white-space:nowrap}
.ss-table thead th{padding:14px 16px;border-bottom:1px solid #272832}
.ss-table thead th.is-left,.ss-table tbody th{text-align:left}
.ss-table thead button{display:inline-flex;gap:6px;align-items:center;padding:0;border:0;background:none;color:#9a9cab;font:800 12px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;min-height:32px}
.ss-table thead button:hover,.ss-table thead th[aria-sort="ascending"] button,.ss-table thead th[aria-sort="descending"] button{color:#fff}
.ss-table thead th[aria-sort="none"] button .ss-arrow{color:#6b6d82}
.ss-table thead th[aria-sort="ascending"] button .ss-arrow,.ss-table thead th[aria-sort="descending"] button .ss-arrow{color:#b9a4f3}
.ss-table:not(.is-expanded) .is-extra{display:none}
.ss-row:hover th,.ss-row:hover td{background:#12131a}
.ss-row.is-selected th,.ss-row.is-selected td{background:#1b1530}
.ss-row.is-selected th{box-shadow:inset 3px 0 0 #b9a4f3}
.ss-pick{display:flex;align-items:center;gap:12px;min-height:44px;color:#f5f4f8;text-decoration:none}
.ss-pick:hover strong{color:#c5adff}
.ss-rank{width:22px;text-align:right;font-size:13px;color:#8e8fa3}
.ss-name{display:flex;flex-direction:column;line-height:1.3}
.ss-name strong{font-size:15px;font-weight:700}
.ss-name small{font-size:12px;color:#9a9cab}
.ss-limited{margin-left:4px;padding:0 6px;border:1px solid #5c5238;color:#d8c27a;font-size:12px;font-weight:700;letter-spacing:.06em;line-height:20px;text-transform:uppercase}
.ss-cell-bar{display:inline-flex;align-items:center;justify-content:flex-end;gap:12px}
.ss-cell-bar>span:last-child,.ss-cell-bar>b{min-width:52px;text-align:right}
.ss-table-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 0;font-size:13px;color:#9a9cab}
.ss-more{min-height:44px;padding:0;border:0;background:none;color:#c5adff;font:700 15px Inter,sans-serif;cursor:pointer}

/* Method, call to action, empty states */
.ss-method summary{list-style:none;cursor:pointer}
.ss-method summary::-webkit-details-marker{display:none}
.ss-method-open{display:inline-block;margin-top:18px;color:#c5adff;font-weight:750}
.ss-method-open::after{content:" ↓"}
.ss-method[open] .ss-method-open::after{content:" ↑"}
.ss-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:36px;padding-top:30px;border-top:1px solid #272832}
.ss-three span{font-size:13px;color:#b9a4f3}
.ss-three h3{margin:12px 0 8px!important;font-family:Inter,sans-serif!important;font-size:20px!important;letter-spacing:-.02em!important}
.ss-three p{margin:0;font-size:15px;line-height:1.65;color:#aaaaba}
.ss-cta{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-top:80px;padding:56px 12px;border-top:1px solid #272832;border-bottom:1px solid #272832}
.ss-cta p{margin:14px 0 0;font-size:16px;color:#aaaaba}
.ss-cta .hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.ss-cta .button{min-height:46px;display:inline-flex;align-items:center;padding:0 18px;border-radius:3px!important}
.ss-pending{padding-bottom:40px}
.ss-pending p{color:#aaaaba;font-size:16px}
.ss-main .v2-footer{margin-top:0}

@media (max-width:1000px){
  .ss-hero,.ss-cols{grid-template-columns:1fr}
  .ss-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ss-strip>div:nth-child(2){border-right:0}
  .ss-strip>div:nth-child(-n+2){border-bottom:1px solid #272832}
  .ss-three{grid-template-columns:1fr;gap:28px}
}
@media (max-width:640px){
  .ss-hero{padding:44px 0 36px;gap:32px}
  .ss-section{padding:56px 0 0}
  .ss-field{padding:22px 18px}
  .ss-field h2{font-size:26px!important}
  .ss-field-key{grid-template-columns:1fr}
  .ss-strip strong{font-size:22px}
  .ss-panel{padding:20px 16px}
  .ss-bar{grid-template-columns:150px minmax(0,1fr) 54px;gap:10px}
  .ss-bar-label{font-size:14px}
  .ss-filters input{width:100%}
  .ss-filters{width:100%}
  .ss-filters label:first-child{flex:1 1 100%}
  .ss-cta{padding:40px 0}
}
/* Proportional segments need the script to size them; never show equal ones. */
.ss-field-bar{visibility:hidden}
.js .ss-field-bar{visibility:visible}
/* brand.css paints every button and details element; these are text controls. */
.ss-main .ss-chart-toggle button,.ss-main .ss-table thead button,.ss-main .ss-more{background:transparent!important;border-color:transparent!important}
.ss-main .ss-chart-toggle button[aria-pressed="true"]{border-bottom-color:#b9a4f3!important}
.ss-main .ss-chart-toggle button{color:#9a9cab!important}
.ss-main .ss-chart-toggle button[aria-pressed="true"],.ss-main .ss-chart-toggle button:hover{color:#fff!important}
.ss-main .ss-table thead button{color:#9a9cab!important}
.ss-main .ss-table thead button:hover,.ss-main .ss-table thead th:not([aria-sort="none"]) button{color:#fff!important}
.ss-main .ss-more{color:#c5adff!important}
.ss-main .ss-filters input,.ss-main .ss-filters select,.ss-main .ss-apply{background:#0b0c10!important;border-color:#30313c!important}
.ss-main details.ss-method{background:transparent!important;border:0!important;border-top:1px solid #272832!important;border-radius:0!important;margin-top:80px;padding-top:72px}
.ss-icon.is-broken img{display:none}
.ss-spot-facts{grid-template-columns:1.25fr 1fr 1fr}
@media (max-width:640px){
  .ss-table{min-width:600px}
  .ss-table .ss-repr-track,.ss-table .ss-wr-track{display:none}
  .ss-table th,.ss-table td{padding:6px 10px;font-size:14px}
  .ss-bar{grid-template-columns:130px minmax(0,1fr) 52px}
  .ss-bar-label{white-space:normal;line-height:1.25}
}
@media (max-width:640px){
  /* Characters and matches stay in the selected-spec panel on phones. */
  .ss-table{min-width:0}
  .ss-table th:nth-child(4),.ss-table td:nth-child(4),.ss-table th:nth-child(5),.ss-table td:nth-child(5),.ss-rank{display:none}
  .ss-table thead button{letter-spacing:.06em;font-size:11px}
  .ss-table th,.ss-table td{padding:6px 6px}
  .ss-cell-bar>span:last-child,.ss-cell-bar>b{min-width:0}
  .ss-name strong{font-size:14px;white-space:normal}
  .ss-pick{flex-wrap:wrap;gap:4px 10px}
  .ss-limited{margin-left:0}
  .ss-bar{grid-template-columns:150px minmax(0,1fr) 50px}
  .ss-bar-label{font-size:13px}
}
.ss-head-short{display:none}
.ss-table thead th[aria-sort="none"] button .ss-head-long,.ss-table thead th[aria-sort="none"] button .ss-head-short{color:inherit}
@media (max-width:640px){
  .ss-head-long{display:none}
  .ss-head-short{display:inline}
}
/* Controls sit on the boards they change. */
.ss-modes-sm{margin-top:0;gap:6px}
.ss-mode-sm{min-height:40px;padding:0 14px;font-size:14px}
.ss-panel-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:-4px 0 18px;padding-bottom:16px;border-bottom:1px solid #272832}
.ss-panel-title{font-size:13px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#9a9cab}
.ss-main .ss-chart-toggle{gap:4px;padding:3px;border:1px solid #30313c;border-radius:4px;background:#0b0c10}
.ss-main .ss-chart-toggle button{min-height:36px;padding:0 14px!important;border:0!important;border-radius:3px!important;font-size:14px}
.ss-main .ss-chart-toggle button[aria-pressed="true"]{background:#2a2540!important;color:#fff!important;border-bottom-color:transparent!important}
@media (max-width:640px){.ss-section .v2-section-heading .ss-modes-sm{margin-top:14px}}