/* /news/ — shared rules of the section. Only new nw- rules live here; everything else is the site's own components
   (page-head, eyebrow, lead, kpis, tabs, chip, btn, field, switch, panel, notice, sb-note, empty-state, sticky-bar, bt-*, wte-*). */
.nw-head,.nw-article,.nw-items{overflow-wrap:anywhere}
.nw-head{padding-top:6px}
.nw-head .lead{max-width:72ch}
/* the source line: as wide as the lead above it (86ch of this smaller font), and when it still takes two lines they are even —
   never one last word on a line of its own */
.nw-source{margin:0;max-width:86ch;color:var(--text-3);font-size:.86rem;text-wrap:balance}
.nw-article{min-width:0}
/* the script hides with the attribute; the site's flex and grid components would otherwise stay on screen */
.nw-article [hidden],.nw-bar [hidden],.nw-hub [hidden]{display:none!important}

/* an ordinary article: one panel, a column of at most 72 characters; the head above it and the links below it end at the
   same right edge */
.nw-prose{display:grid;gap:12px;max-width:calc(72ch + 38px)}
.nw-head-prose,.nw-prose~.nw-related{max-width:calc(72ch + 38px)}
.nw-prose h2,.nw-prose h3,.nw-prose h4,.nw-prose h5,.nw-prose h6{margin-top:6px;scroll-margin-top:16px}
.nw-prose h5,.nw-prose h6{font-family:var(--font-display);line-height:1.2;margin-bottom:0;text-wrap:balance}   /* site.css styles headings down to h4 */
.nw-prose h2{font-size:1.3rem}
.nw-prose h3,.nw-prose h4,.nw-prose h5,.nw-prose h6{font-size:1.1rem}
.nw-quote{margin:0;padding:6px 12px;border-left:2px solid var(--line-2);color:var(--text-2)}
.nw-means b{color:var(--text);font-weight:600}

/* a list of changes: one row per change. In a class or race list the first change of an ability carries its icon and the
   next ones (.nw-m) follow it without a line between them; .nw-o names nothing we know. The text column stops at about 80
   characters; in a class or race list the room on the right holds the copy-link button (news.js) */
.nw-list{list-style:none;margin:0;padding:0}
.nw-list>li{position:relative;min-height:46px;padding:11px max(44px,100% - 84ch) 11px 40px;border-top:1px solid var(--line);color:#efe7cf}
.nw-list>li:first-child{border-top:0}
.nw-list>li>img{position:absolute;left:0;top:9px;width:28px;height:28px;border-radius:6px;border:1px solid var(--line-2)}
.nw-list>.nw-o:before,.nw-plain>li:before{content:"";position:absolute;left:11px;top:20px;width:6px;height:6px;border-radius:50%;background:var(--accent-dim)}
.nw-list>.nw-m{min-height:0;padding-top:0;border-top:0}
.nw-plain>li{min-height:40px;padding:9px max(0px,100% - 84ch) 9px 22px}
.nw-plain>li:before{left:4px;top:18px}
.nw-list>.nw-n{min-height:0;padding-left:0}
.nw-list>.nw-n:before{content:none}
.nw-d1{margin-left:18px}.nw-d2{margin-left:36px}.nw-d3{margin-left:54px}
.nw-list a{color:var(--teal-2);text-decoration:none;border-bottom:1px dotted #48b2a680}
.nw-list a:focus-visible{color:var(--accent-2);border-bottom-color:var(--accent-dim)}
@media (hover:hover){.nw-list a:hover{color:var(--accent-2);border-bottom-color:var(--accent-dim)}}   /* no sticky hover after a tap */
.nw-list .chip{margin-left:2px;vertical-align:1px}
.chip.nw-fix{color:var(--text-3)}
/* «было → стало»: one pill that moves to the next line whole; very long values wrap inside it */
.nw-delta{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 5px;max-width:100%;padding:0 8px;border:1px solid var(--line-2);border-radius:12px;color:var(--text-3);font-size:.84rem;vertical-align:1px}
.nw-delta .bt-was{text-decoration:line-through}
.nw-delta .bt-now{color:var(--accent-2);font-weight:500}
/* developers' comment and our own remark: the site's side note; the comment drops the warning sign */
.nw-list .sb-note,.nw-list+.sb-note{margin:8px 0 0}
.nw-note:before{content:none}
.nw-note b{color:var(--text);font-weight:600}
.nw-nonotes .nw-note{display:none}
.nw-list>li,.nw-note{scroll-margin-top:16px}
@keyframes nw-flash{0%{background:#48b2a633}100%{background:#48b2a600}}
.nw-hit{animation:nw-flash 2.4s ease-out both}
@media (prefers-reduced-motion:reduce){.nw-hit{animation:none;outline:2px solid var(--teal);outline-offset:-2px}}

/* the closing links to our sections, the note about our data, the way back */
.nw-related .btn,.nw-archives .btn{min-height:40px}
.nw-related,.nw-data-note{max-width:90ch}
.nw-back{margin:0}
.nw-back a{display:inline-flex;align-items:center;min-height:40px}

@media (max-width:640px){
  .nw-list>li{padding-left:36px;padding-right:40px}
  .nw-list>li>img{width:26px;height:26px}
  .nw-list>.nw-o:before{left:10px}
  .nw-plain>li{padding-left:20px;padding-right:0}
  .nw-list>.nw-n{padding-left:0}
  .nw-d1{margin-left:12px}.nw-d2{margin-left:24px}.nw-d3{margin-left:36px}
}

/* paper: the text without the chrome and the controls, dark on white; news.js opens the folded sections before printing */
@media print{
  .hdr,.ftr,.crumbs,.skip,.nw-bar,.nw-toc,.nw-tools,.nw-copy,.nw-more,.nw-related,.nw-back,.nw-types,.nw-rss,.nw-lead-go,.nw-archives,.bt-links,.wte-fab{display:none!important}
  body{background:#fff!important}
  main.container,main.container *{color:#111!important;background:none!important;box-shadow:none!important;animation:none!important}
  main.container a{border-bottom:0;text-decoration:none}
  .nw-wte{display:block}
  .nw-u,.nw-items,.nw-prose,.nw-lead,.kpi{border-color:#bbb!important}
  .nw-list>li{border-color:#ddd;padding-right:0;break-inside:avoid}
  .nw-u>summary:before{content:none}
}
@media print{details.nw-u::details-content{content-visibility:visible;display:block}}
/* /news/ hub and year archives: the head with the section emblem, the lead card of the newest update, type tabs, the timeline. */
.nw-hub-head{grid-template-columns:auto minmax(0,1fr) auto;column-gap:18px}
.nw-hub-head>*{grid-column:2}
.nw-hub-head>.nw-rss{grid-column:3;grid-row:1/span 2;justify-self:end}
.nw-hub-head>.nw-emblem{grid-column:1;grid-row:1/span 4;display:grid;place-items:center;width:72px;height:72px;border:1px solid var(--accent-dim);border-radius:50%;background:radial-gradient(circle at 50% 35%,#e0b25b29,#e0b25b0a 70%);color:var(--accent-2)}
.nw-emblem svg{display:block;width:44px;height:44px}
.nw-rss{margin:0;font-size:.9rem}
.nw-rss a{display:inline-flex;align-items:center;min-height:40px}

.nw-lead{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;border-top:3px solid var(--accent-dim)}
.nw-lead[hidden]{display:none}   /* news.js: a type tab that the newest update does not belong to */
.nw-lead h2{font-size:1.45rem}
.nw-lead h2 a{color:var(--text);text-decoration:none}
.nw-lead-n{color:var(--text-2)}
.nw-lead-cls{display:flex;flex-wrap:wrap;gap:6px}
.nw-lead-cls a{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:8px;background:var(--bg-2)}
.nw-lead-cls img{display:block;width:26px;height:26px;border-radius:50%}
.nw-lead-cls a.is-mine{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-dim)}
.nw-lead-go{margin:0}
.nw-lead-go .btn,.nw-types a{min-height:40px}
@media (hover:hover){
  .nw-lead h2 a:hover{color:var(--accent-2)}
  .nw-lead-cls a:hover{border-color:var(--accent-dim)}
}

.nw-hub{display:grid;gap:18px}
.nw-month{display:grid;gap:8px}
.nw-month>h2{font-size:1.15rem;color:var(--accent-2)}
.nw-items{margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
/* a row: date and type on the left, title and summary on the right; the title's link covers the whole row. An update row
   prints the number of its changes (.nw-item-n) and news.js writes «для шамана: 18» into that same line (.nw-mine): the
   left column holds the longest class on one line, so the row has one height with and without a remembered class */
.nw-item{position:relative;display:grid;grid-template-columns:176px minmax(0,1fr);grid-template-rows:auto 1fr;gap:2px 16px;padding:12px 16px;border-top:1px solid var(--line)}
.nw-item:first-child{border-top:0}
.nw-item-meta{grid-row:1/span 2;display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0;color:var(--text-3);font-size:.86rem}
.nw-item-title{font-size:1.1rem}
.nw-item-title a{color:var(--text);text-decoration:none}
.nw-item-title a:after{content:"";position:absolute;inset:0}
.nw-item-sum{grid-column:2;margin:0;color:var(--text-2);font-size:.92rem}
.nw-upd{font-size:.8rem}
.nw-mine{color:var(--accent-2);font-weight:500}
@media (hover:hover){
  .nw-item:hover{background:var(--panel-2)}
  .nw-item:hover .nw-item-title a{color:var(--accent-2)}
}
.nw-archives{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--text-2)}

/* wide screens: the lead card keeps its text on the left and the ways in on the right */
@media (min-width:900px){
  .nw-lead{grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:center}
  .nw-lead>*{grid-column:1}
  .nw-lead>.nw-lead-cls{grid-column:2;grid-row:1/span 2;justify-content:flex-end}
  .nw-lead>.nw-lead-go{grid-column:2;grid-row:3;justify-self:end}
}

@media (max-width:640px){
  .nw-hub-head{grid-template-columns:auto minmax(0,1fr);column-gap:12px}
  .nw-hub-head>.nw-emblem{grid-row:1;width:44px;height:44px}
  .nw-emblem svg{width:28px;height:28px}
  .nw-hub-head>.eyebrow{align-self:center}
  .nw-hub-head>h1,.nw-hub-head>.lead,.nw-hub-head>.nw-rss{grid-column:1/-1;grid-row:auto;justify-self:start}
  .nw-lead h2{font-size:1.25rem}
  .nw-item{grid-template-columns:minmax(0,1fr);grid-template-rows:none;padding:12px 14px}
  .nw-item-meta{grid-row:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 8px}
  .nw-item-n{flex-basis:100%}   /* a line of its own: whatever it reads, the row keeps its height */
  .nw-item-sum{grid-column:1}
}
/* /news/<slug>/ patch notes: the sticky bar of class and section tabs (the site's .bt-bar), the contents column (.wte-toc),
   class panels (.bt-class), folded sections (.bt-block). */
/* class colours of the panels' top line (talents.json; a rule instead of an inline style) */
.nw-c-warrior{--c:#C79C6E}.nw-c-paladin{--c:#F58CBA}.nw-c-hunter{--c:#ABD473}.nw-c-rogue{--c:#FFF569}.nw-c-priest{--c:#FFFFFF}
.nw-c-shaman{--c:#0070DE}.nw-c-mage{--c:#69CCF0}.nw-c-warlock{--c:#9482C9}.nw-c-druid{--c:#FF7D0A}

/* the bar: the tabs take the row, the search button stays at its end; an opened search is a second row under the tabs.
   Until news.js takes the search it is unseen but keeps its 64 px (.nw-wait): the tabs wrap the same way before and after,
   so the bar has one height from the first paint */
.nw-bar{flex-wrap:wrap}
.nw-bar .bt-toc{flex:1 1 0}
.nw-bar .bt-toc a{min-height:40px;padding:6px 8px}
.nw-bar .tag{color:inherit;opacity:.7}
.nw-find{flex:none}
.nw-find.nw-wait{visibility:hidden}
.nw-find>summary{list-style:none;display:flex;align-items:center;justify-content:center;width:64px;min-height:40px;border:1px solid var(--line-2);border-radius:6px;background:var(--panel-2);color:var(--text);font-size:.9rem;font-weight:500;cursor:pointer;user-select:none}
.nw-find>summary::-webkit-details-marker{display:none}
.nw-find[open]{position:relative;flex:1 0 100%;padding-left:72px}
.nw-find[open]>summary{position:absolute;left:0;top:0;border-color:var(--accent-dim);color:var(--accent-2)}
.nw-find .field{min-height:40px}
@media (hover:hover){.nw-find>summary:hover{border-color:var(--accent-dim);color:var(--accent-2)}}

/* an anchor jump and a keyboard focus land below the bar (news.js keeps --nw-bar-h exact), as on /beta/ */
.nw-patch [id],.nw-patch .nw-u{scroll-margin-top:calc(var(--nw-bar-h,56px) + 10px)}
@supports selector(html:has(*)){
  html:has(#nw-bar){scroll-padding-top:calc(var(--nw-bar-h,56px) + 8px)}
  .nw-patch [id],.nw-patch .nw-u{scroll-margin-top:2px}
}

/* contents: wide screens only, under the bar; there the bar keeps the classes and the contents list the sections */
.nw-toc{display:none}
.nw-toc ol ol{gap:0;margin:0 0 4px 14px}
.nw-toc ol ol a{padding:3px 8px;color:var(--text-3);font-size:.84rem}
@media (min-width:980px){
  .nw-toc{display:block;top:calc(var(--nw-bar-h,56px) + 12px);max-height:calc(100vh - var(--nw-bar-h,56px) - 24px)}
  .nw-bar .nw-ts{display:none}
}
/* below that the bar lists the sections too: one row that scrolls sideways (the site's rule for /beta/ stops at 900 px). The
   row has eighteen tabs and no scrollbar, so its right end fades out — the sign that it goes on; the room after the last tab
   lets that tab come clear of the fade (news.js keeps the active tab clear of it too) */
@media (max-width:979px){
  .nw-bar .bt-toc{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;justify-content:start;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;padding:4px 32px 4px 4px;margin:-4px;scroll-padding-inline:8px 36px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .nw-bar .bt-toc::-webkit-scrollbar{display:none}
}

.nw-patch{display:grid;gap:14px;align-content:start}
.nw-top{display:grid;gap:6px}
.nw-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;min-height:40px}
/* the status line: the sentence, then its actions («Показать все», «Забыть класс»). An action and the dot before it are one
   piece (.nw-act-g, news.js); the sentence and the pieces are the items of a wrapping flex row, so the line breaks only
   between them, and the dot hangs in the gap before its action. Where a piece starts a line its dot lies left of the box
   and is cut off (clip-path; the box keeps 12 px above and below for the tap areas and 5 px at the sides for a focus ring):
   on a narrow screen no line begins with a separator and none ends with one. Nothing is kept from wrapping — a piece wider
   than the line breaks inside its label */
.nw-status{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 1.2em;margin:0;color:var(--text-2);font-size:.92rem;-webkit-clip-path:inset(-12px -5px);clip-path:inset(-12px -5px)}
.nw-act-g{position:relative}
.nw-sep{position:absolute;right:100%;margin-right:.45em}
/* the actions of the status line read as links; their tap area is 40 px high without spreading the lines */
.nw-act{display:inline-block;margin:-9px 0;padding:9px 2px;border:0;background:none;color:var(--accent-2);font:inherit;text-decoration:underline;cursor:pointer}
@media (hover:hover){.nw-act:hover{color:#fff}}
.nw-switches{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
.nw-switches .switch,.nw-switches .btn{min-height:40px}
.nw-switches :disabled{opacity:.5;cursor:default}
.nw-patch .empty-actions .btn{min-height:40px}
/* a newer article of the series (news.js): the whole line is the link, 40 px high */
.nw-newer{padding-top:2px;padding-bottom:2px}
.nw-newer a{display:flex;align-items:center;min-height:40px;font-weight:500}

/* the head of a unit: icon, title, count, links to our pages */
.nw-uh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:6px}
.nw-uh>img{flex:none;width:34px;height:34px;border-radius:7px;border:1px solid var(--line-2)}
.nw-uh h2,.nw-uh h3,.nw-uh h4{font-size:1.5rem}
.nw-uh .btn{min-height:40px}
.nw-u h5{font-family:var(--font-display);line-height:1.2;text-wrap:balance}   /* site.css styles headings down to h4 */
.nw-u .bt-h3{margin:12px 0 2px}
.nw-sub{display:flex;align-items:center;gap:8px;margin:12px 0 2px}
.nw-sub img{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-2)}
.nw-races h4{margin:12px 0 2px;font-size:1.05rem;color:var(--accent-2)}
.nw-sub h4{margin:0}
.nw-classes h3{margin:4px 0 2px;font-size:1.45rem}
.nw-known .nw-uh h2{font-size:1.3rem}
.bt-block.nw-u{margin-top:0}
.nw-u>summary{min-height:44px}
.nw-u>summary h3{font-size:1.1rem}
.nw-u>.bt-body{padding:0 12px 6px}

/* «Ещё в обновлении»: the other sections while one class is shown */
.nw-more{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;color:var(--text-2);font-size:.9rem}
.nw-more a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 10px;border:1px solid var(--line);border-radius:6px;color:var(--text-2);text-decoration:none}
@media (hover:hover){.nw-more a:hover{border-color:var(--line-2);color:var(--text)}}

/* copy link (news.js): in the room right of the text; on a screen with a pointer it shows with its row. 40 px is its least
   width, not a fixed one, and its words do not break by letters: «Скопировано ✓» would make it wider, so the site's
   FC.copyText finds that the label does not fit, shows «✓» in the button and the words beside it */
.nw-copy{position:absolute;right:0;top:3px;display:grid;place-items:center;min-width:40px;height:40px;padding:0;border:0;border-radius:6px;background:none;color:var(--text-3);font-size:.8rem;overflow-wrap:normal;cursor:pointer}
.nw-copy:focus-visible{color:var(--accent-2)}
@media (hover:hover){
  .nw-copy{opacity:0}
  .nw-list>li:hover>.nw-copy,.nw-copy:focus-visible,.nw-copy.copied{opacity:1}
  .nw-copy:hover{color:var(--accent-2)}
}

@media (max-width:640px){
  .nw-uh h2,.nw-uh h3,.nw-uh h4{font-size:1.3rem}
  .nw-u>.bt-body{padding:0 10px 4px}
}