/* Страница разбора: спокойная иерархия, общий профиль для урона и исцеления. Цвета - только токены
   из app.css (DESIGN.md «Цвет»); литералы остались у иконок Wowhead, где их разрешает DESIGN.md. */
.analysis-page{min-width:0;padding-bottom:110px}
.analysis-page [hidden]{display:none!important}
.analysis-page :is(h1,h2,h3,h4,p){margin-top:0}
.analysis-page .hint{color:var(--mut);font-family:var(--body);line-height:1.7}
.analysis-page h2{font:600 21px/1.4 var(--body);margin-bottom:0}
.analysis-page h3{font:600 16px/1.5 var(--body)}
.analysis-page button,.analysis-page a{touch-action:manipulation}
.analysis-page :is(button,a,summary):focus-visible{outline:2px solid var(--ac);outline-offset:3px}
/* Цели переходов встают под липкое оглавление (его высота плюс воздух). */
.analysis-page :is(#takeaway,#recommendations,#profile,#comparison,#chatCard,.profile-widget,.profile-source,.advice-card){scroll-margin-top:76px}
.analysis-page details>summary{list-style:none}
.analysis-page details>summary::-webkit-details-marker{display:none}

/* ---- заголовок забега и ряд его действий ---- */
.run-hero{padding:14px 0 26px;min-width:0;overflow-wrap:anywhere}
.hero-eyebrow{font-size:14px;line-height:1.5;color:var(--mut);margin-bottom:8px}
.hero-eyebrow b{color:var(--fg);font-weight:600}
.run-hero h1{font:600 36px/1.3 var(--body);margin-bottom:10px}
.run-hero h1 em{font-style:normal;color:var(--ac);white-space:nowrap}
.run-meta{display:flex;flex-wrap:wrap;margin:0;font-size:13px;line-height:1.6;color:var(--mut);font-variant-numeric:tabular-nums}
.run-meta>span+span::before{content:"·";margin:0 9px;color:var(--dim)}
/* Пока данных забега нет, строка билда и строка фактов держат место скелетоном высотой в строку. */
.hero-skel{display:flex;align-items:center;min-height:21px}
.hero-skel .skel{display:block;margin:0;height:10px;width:min(280px,70%)}
.run-meta.hero-skel .skel{width:min(320px,80%)}
.hero-skel-actions .skel{display:block;margin:0;width:128px;height:32px;border-radius:8px}
/* Действия: ссылка на разбор, популярные билды, лог. Меню раскрываются панелью под своей кнопкой. */
.hero-actions{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px}
.hero-actions:empty{display:none}
.hero-actions .btn.sm{gap:7px;white-space:nowrap}
.hero-actions .btn .ico{width:14px;height:14px}
.hero-wide{margin-right:-3px}
.hero-menu{position:relative}
.hero-menu>summary .ico:last-child{color:var(--mut);transition:transform .15s}
.hero-menu[open]>summary{background:var(--tint-ac);border-color:var(--line-ac)}
.hero-menu[open]>summary .ico:last-child{transform:rotate(180deg)}
.hero-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:30;width:min(420px,calc(100vw - 32px));padding:18px 20px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 16px 36px var(--scrim);overflow-wrap:normal}
.hero-pop-title{font:600 14px/1.5 var(--body);color:var(--fg);margin:0}
.hero-pop-text{font-size:12px;line-height:1.6;color:var(--mut);margin:4px 0 0}
.share-pop input{display:block;width:100%;margin-top:14px;font-size:12px}
.share-pop-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.build-pop{max-height:min(65vh,480px);overflow-y:auto}

/* ---- оглавление: прилипает под верх окна; фон только в прилипшем состоянии (флаг ставит остров) ---- */
.page-toc{position:sticky;top:var(--topbar,0px);z-index:10;display:flex;align-items:center;gap:16px;margin:0 0 28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px;transition:background-color .2s}
html[data-toc-stuck] .page-toc{margin-inline:calc(-1 * var(--gutter,0px));padding-inline:var(--gutter,0px);background:var(--bg)}
/* Ссылки, которые не поместились, уходят под затухание у правого края (флаг ставит остров). */
html[data-toc-overflow] .toc-links{-webkit-mask-image:linear-gradient(90deg,black calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,black calc(100% - 32px),transparent)}
/* Под липкой полосой телефона оглавление заходит на её нижнюю границу: две соседние линии читались
   бы одной толстой. */
@media(max-width:900px){.page-toc{top:calc(var(--topbar,0px) - 1px)}}
.toc-links{display:flex;flex:1 1 auto;min-width:0;gap:24px;padding:14px 0;overflow-x:auto;scrollbar-width:none}
.toc-links::-webkit-scrollbar{display:none}
.toc-links a{color:var(--mut);white-space:nowrap;text-decoration:none}
.toc-links a:hover{color:var(--ac)}
.toc-count{display:inline-block;margin-left:7px;padding:0 6px;border-radius:5px;background:var(--panel2);font:11px/18px var(--mono);color:var(--mut)}
/* Состояние разбора стоит в оглавлении, а не поверх данных. */
.toc-status{display:inline-flex;align-items:center;gap:8px;flex:none;padding:5px 11px;border-radius:8px;background:var(--panel2);color:var(--fg);font-size:12px;line-height:18px;white-space:nowrap;text-decoration:none;transition:background-color .15s}
.toc-status:hover{background:var(--tint-ac)}
.toc-status .spinner{width:12px;height:12px;margin:0;border-width:2px}
.toc-status .elapsed{font:12px var(--mono);color:var(--mut);font-variant-numeric:tabular-nums}
.toc-status .ico{width:14px;height:14px}
.toc-status.is-done{background:var(--badge-good)}
.toc-status.is-done .ico{color:var(--good)}
.toc-status.is-partial{background:var(--badge-warn)}
.toc-status.is-partial .ico{color:var(--warn)}

.crumb-back{display:inline-flex;align-items:center;gap:6px}
.crumb-back .ico{width:14px;height:14px}

/* ---- поверхности и заголовки разделов: один h2 у всех разделов ---- */
.analysis-surface{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:22px;padding:24px;min-width:0}
.analysis-section-heading{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 20px;margin-bottom:16px}
.analysis-section-heading>:not(h2){font-size:12px;color:var(--mut)}
.analysis-section-heading>.tag{align-self:center;margin-right:auto}
.analysis-page>.notice{margin:0 0 22px}

/* ---- итог ---- */
.takeaway{container-type:inline-size;margin:0 0 34px;min-width:0}
.takeaway-layout{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.takeaway-layout>section{display:grid;grid-template-columns:176px minmax(0,1fr);gap:32px;padding:24px 26px;min-width:0}
.takeaway h3{margin:0}
.takeaway-body{min-width:0;max-width:82ch}
.takeaway-strengths{list-style:none;padding:0;margin:0}
.takeaway-strengths,.takeaway-lead{font-size:14px;line-height:1.75;color:var(--fg);white-space:pre-line;overflow-wrap:anywhere}
.takeaway-strengths>li{padding:10px 0;border-bottom:1px solid var(--softline)}
.takeaway-strengths>li:first-child{padding-top:0}
.takeaway-strengths>li:last-child{padding-bottom:0;border-bottom:0}
.takeaway-strengths strong{font-weight:600;color:var(--fg)}
.takeaway-positive{background:var(--tint-good)}
.takeaway-attention{background:var(--tint-bad);border-top:1px solid var(--line)}
.takeaway[data-has-strengths=false] .takeaway-attention{border-top:0}
.takeaway-more{margin-top:10px;padding-top:10px;border-top:1px solid var(--softline)}
.takeaway-more>summary{color:var(--mut);font-size:13px;cursor:pointer;width:fit-content}
.takeaway-more>summary:hover{color:var(--ac)}
.takeaway-more[open]>summary{margin-bottom:10px}
@container(min-width:1000px){.takeaway-layout>section{grid-template-columns:200px minmax(0,1fr);gap:36px}}
@container(max-width:570px){.takeaway-layout>section{grid-template-columns:minmax(0,1fr);gap:14px;padding:20px}}

/* ---- рекомендации: список по приоритету; справа связанные данные и оценка совета ---- */
.advice-list{display:flex;flex-direction:column;gap:14px;margin-bottom:34px}
.advice-card{display:grid;grid-template-columns:26px minmax(0,1fr) 260px;column-gap:16px;align-items:start;padding:22px 24px;background:var(--panel);border:1px solid var(--line);border-radius:10px;min-width:0}
/* Без связанных данных и оценки (публичная страница, старый отчёт) текст занимает всю ширину. */
.advice-card:not(:has(>.advice-side)){grid-template-columns:26px minmax(0,1fr)}
.advice-number{display:flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 4px;border:1px solid var(--line-ac);background:var(--tint-ac);border-radius:5px;color:var(--ac);font:12px var(--mono)}
.advice-body{min-width:0;max-width:80ch}
.advice-body>h3{font-size:16px;line-height:1.45;margin:1px 0 6px;overflow-wrap:anywhere}
.advice-meta{font-size:12px;line-height:1.5;color:var(--mut);margin:0 0 12px}
.advice-summary{font-size:14px;line-height:1.7;margin:0 0 12px;white-space:pre-line;overflow-wrap:anywhere}
.advice-more{font-size:13px;line-height:1.7}
.advice-more>summary{color:var(--ac);cursor:pointer;width:fit-content;line-height:1.6}
.advice-more[open]>summary{margin-bottom:14px}
.analysis-page :is(.advice-more,.advice-evidence,.analysis-error-reason,.takeaway-more)>summary{display:flex;align-items:center;gap:7px}
.analysis-page :is(.advice-more,.advice-evidence,.analysis-error-reason,.takeaway-more)>summary .disclosure-chevron{width:13px;height:13px;flex:0 0 13px;margin:0;stroke:currentColor;transition:transform .15s}
.analysis-page :is(.advice-more,.advice-evidence,.analysis-error-reason,.takeaway-more)[open]>summary .disclosure-chevron{transform:rotate(180deg)}
.advice-explanation{margin:0 0 16px;white-space:pre-line;overflow-wrap:anywhere}
.advice-more .evi{border:0;background:var(--sunken)}
.advice-action{margin:16px 0 0}
.advice-action h4{font:600 13px/1.5 var(--body);margin:0 0 4px}
.advice-action p{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.advice-evidence{margin-top:16px;padding-top:12px;border-top:1px solid var(--softline);font-size:12px}
.advice-evidence>summary{cursor:pointer;color:var(--mut);width:fit-content}
.advice-evidence>summary:hover{color:var(--ac)}
.advice-evidence[open]>summary{margin-bottom:12px}
.advice-evidence pre{max-width:100%;overflow:auto;white-space:pre-wrap;margin:0 0 12px;padding:10px 12px;border-radius:8px;background:var(--sunken);font:11px/1.6 var(--mono);color:var(--fg)}
.evidence-metric{margin:0 0 2px}
.evidence-metric>span{color:var(--mut);font-weight:400}
.evidence-peers{margin:0 0 10px;color:var(--mut)}
.evidence-quote{margin:12px 0 0;padding:10px 12px;border-radius:8px;background:var(--sunken)}
.evidence-quote blockquote{margin:0;font-size:12px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
.evidence-quote figcaption{margin-top:4px;font-size:11px;color:var(--mut)}
.advice-side{display:flex;flex-direction:column;gap:18px;min-width:0;height:100%;padding-left:8px}
.profile-jumps{display:flex;flex-direction:column;gap:8px;min-width:0}
.advice-side-label{font-size:11px;line-height:1.5;color:var(--mut)}
.profile-jump{display:flex;align-items:center;min-height:44px;padding:7px 11px;border:1px solid var(--line);border-radius:8px;font-size:12px;line-height:1.45;color:var(--ac);text-decoration:none;min-width:0;overflow-wrap:anywhere;transition:background-color .15s,border-color .15s}
.profile-jump.wh{--spell-icon-size:16px;padding:7px 11px 7px 35px!important;text-decoration:none;cursor:pointer}
.profile-jump.wh>.iconsmall{left:11px!important;top:9px!important}
.profile-jump small{display:block;color:var(--mut);font-size:11px}
.profile-jump:hover{background:var(--tint-ac);border-color:var(--ring-ac)}
.advice-feedback{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;font-size:12px;color:var(--mut)}
.advice-feedback>span{flex-basis:100%}
.advice-feedback .vote{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--fg);font:500 12px/1 var(--body);cursor:pointer;transition:background-color .15s,border-color .15s}
.advice-feedback .vote .ico{width:14px;height:14px;color:var(--mut)}
.advice-feedback .vote:hover:not(:disabled){background:var(--tint-ac)}
.advice-feedback .vote.voted{background:var(--tint-ac2);border-color:var(--line-ac);color:var(--ac)}
.advice-feedback .vote.voted .ico{color:var(--ac)}
.analysis-page .profile-jump{text-decoration:none}
.analysis-focus{display:flex;width:fit-content;gap:3px;padding:3px;margin:0 0 26px;border:1px solid var(--line);border-radius:8px;background:var(--sunken)}
.analysis-focus button{padding:9px 20px;border:1px solid transparent;border-radius:5px;background:none;color:var(--mut);font:500 14px/1.4 var(--body);cursor:pointer}
.analysis-focus button[aria-pressed=true]{background:var(--tint-ac2);border-color:var(--line-ac);color:var(--ac)}
.analysis-focus button:focus-visible{outline-offset:-1px}
.analysis-focus button:hover:not([aria-pressed=true]){color:var(--fg)}
.view-unavailable p,.profile-unavailable p{margin:12px 0 0;color:var(--mut);font-size:14px;line-height:1.7}
.profile-unavailable{padding:24px}
.profile-note{padding:0 24px;margin:12px 0}
.chat-focus-label{display:block;margin-bottom:8px;color:var(--mut);font:500 11px/1.4 var(--body)}
@media(max-width:650px){.analysis-focus{width:100%}.analysis-focus button{flex:1}.profile-unavailable{padding:18px}.profile-note{padding:0 18px}}
/* A spell named in running text (advice, summary, row details, chat answers) reads as part of the
   sentence: its colour, a dotted underline, blue only under the pointer. */
.analysis-page :is(.advice-body>h3,.takeaway,.advice-summary,.advice-explanation,.advice-action,.profile-context,.discussion .bubble) a.wh{color:inherit;text-decoration:none;border-bottom:1px dotted var(--dim)}
.analysis-page :is(.advice-body>h3,.takeaway,.advice-summary,.advice-explanation,.advice-action,.profile-context,.discussion .bubble) a.wh:hover{color:var(--ac);border-bottom-color:var(--ac)}

/* ---- профиль ---- */
.profile-widget{padding:0;overflow:hidden}
.profile-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px 18px;border-bottom:1px solid var(--line)}
.headline-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);column-gap:26px;flex-shrink:0}
/* Shared rows keep values aligned when a translated series label wraps. */
.headline-metrics>div{display:grid;grid-template-rows:subgrid;grid-row:1 / -1;align-items:baseline;min-width:0}
.headline-value{white-space:nowrap}
.headline-metrics>div+div{padding-left:26px;border-left:1px solid var(--line)}
.headline-metrics>div>span{display:block;font-size:11px;color:var(--mut);margin-bottom:2px}
.headline-metrics>div>.profile-series{display:flex;align-items:center;gap:7px}
.profile-series::before{content:"";flex:0 0 14px;height:5px;border-radius:2px;background:var(--ac)}
.group-headline .profile-series::before{background:var(--peer)}
.headline-metrics b{font:500 28px/1.2 var(--disp);color:var(--ac)}
.headline-metrics small{font:10px var(--mono);color:var(--mut);margin-left:6px}
.headline-metrics p{display:flex;align-items:baseline;gap:6px;font-size:11px;line-height:1.4;color:var(--mut);margin:8px 0 0;white-space:nowrap}
.headline-metrics strong{font:500 14px/1.4 var(--mono);color:var(--fg)}
.headline-metrics .group-headline b{color:var(--peer-num)}
.profile-controls{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;padding:18px 24px 10px}
.profile-tabs{display:flex;gap:4px;flex-wrap:wrap}
.profile-tabs button{font:13px var(--body);border:0;border-bottom:2px solid transparent;border-radius:0;background:none;padding:8px 12px;color:var(--mut);cursor:pointer}
.profile-tabs button:hover{color:var(--fg);background:none}
.profile-tabs button[aria-pressed=true]{border-color:var(--ac);color:var(--fg)}
/* Переключатель языка названий на публичной странице: дорожка и нажатая кнопка. */
.profile-view{display:flex;padding:3px;border:1px solid var(--line);border-radius:8px;background:var(--sunken)}
.profile-view button{font:13px var(--body);color:var(--mut);padding:6px 11px;border:1px solid transparent;border-radius:5px;background:none;cursor:pointer}
.profile-view button:hover:not([aria-pressed=true]){color:var(--fg);background:none}
.profile-view button[aria-pressed=true]{background:var(--tint-ac2);border-color:var(--line-ac);color:var(--ac);cursor:default}
.profile-panel{padding:0 12px 8px}
.profile-grid{display:grid;grid-template-columns:250px minmax(65px,1fr) 108px 110px 104px;gap:20px;align-items:center;padding:10px 12px 10px 20px;min-width:0}
.profile-source>.profile-grid{min-height:62px}
.profile-table-head{font-size:11px;color:var(--mut);text-align:right;min-height:0;padding-top:8px;padding-bottom:10px}
.profile-table-head .profile-values,.profile-table-head .profile-values>span{font:inherit}
.profile-table-head .profile-values{display:flex;flex-direction:row;justify-content:flex-end;gap:4px}
.profile-table-head .profile-values>span+span::before{content:"/ ";}
.profile-table-head>span:first-child{text-align:left}
.profile-table-head small{display:block;font-size:10px;margin-top:2px}
.profile-source{border-top:1px solid var(--softline)}
.profile-ability{font-size:14px;line-height:20px;font-weight:500;min-width:0;overflow-wrap:anywhere}
.profile-ability a.wh,.ability-fallback{display:block;position:relative;padding-left:28px!important;min-height:20px;line-height:20px;color:var(--fg)!important;text-decoration:none;border-bottom:0}
.profile-ability a.wh{text-decoration:underline dotted var(--dim);text-underline-offset:4px}
/* Wowhead задаёт ins отступ 4px. В компактной рамке обнуляем его вместе с размером. */
.profile-ability a.wh>.iconsmall,.melee-icon{position:absolute!important;left:0!important;top:0!important;display:block;width:20px!important;height:20px!important;margin:0!important;box-sizing:border-box;border:1px solid #454550;border-radius:3px;overflow:hidden}
.profile-ability a.wh>.iconsmall>ins{inset:0!important;width:100%!important;height:100%!important;border:0!important;background-size:cover!important;background-position:center!important}
.profile-ability a.wh>.iconsmall>del{display:none!important}
.melee-icon{display:flex;align-items:center;justify-content:center;background:var(--panel2);color:var(--peer)}
.melee-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.profile-track{display:flex;flex-direction:column;gap:6px;min-width:0}
.profile-bar{display:block;height:7px;min-height:7px;background:var(--ac);border-radius:2px}
.profile-bar.group{background:var(--peer)}
.profile-values{display:flex;flex-direction:column;gap:2px;text-align:right;font:500 13px/1.4 var(--mono);white-space:nowrap}
.profile-player{color:var(--ac)}
.profile-group{color:var(--peer-num)}
.profile-difference{text-align:right;font:500 13px var(--mono);color:var(--fg);white-space:nowrap}
.profile-difference.positive{color:var(--good)}
.profile-difference.negative{color:var(--bad)}
/* «Подробнее» только у строк, о которых есть вывод; шеврон поворачивается у открытой строки. */
.profile-expand{display:inline-flex;align-items:center;justify-self:end;gap:5px;height:32px;padding:0 8px;border:0;border-radius:7px;background:none;color:var(--ac);font:500 12px/1 var(--body);cursor:pointer;white-space:nowrap;transition:background-color .15s}
.profile-expand:hover:not(:disabled){background:var(--tint-ac)}
.profile-expand .ico{width:14px;height:14px;transition:transform .15s}
.profile-expand[aria-expanded=true] .ico{transform:rotate(180deg)}
/* Открытая строка и цель перехода - выбранный элемент: оттенок и тонкая граница, подробности
   внутри без своих рамок. */
.profile-source:is(.is-target,:has(.profile-expand[aria-expanded=true])),.advice-card.is-target{outline:1px solid var(--ring-ac);outline-offset:-1px;background:var(--tint-ac)}
.profile-source:is(.is-target,:has(.profile-expand[aria-expanded=true])){border-radius:8px}
.profile-source:is(.is-target,:has(.profile-expand[aria-expanded=true]))+.profile-source{border-top-color:transparent}
.profile-context{padding:2px 24px 22px 48px}
.profile-insight{font-size:13px;line-height:1.75;max-width:90ch}
.profile-insight+.profile-insight{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-ac)}
.profile-insight h3{font-size:15px;margin-bottom:2px}
.profile-insight h3 a{color:var(--fg);text-decoration:none}
.insight-basis{font-size:12px;color:var(--mut);margin:0 0 10px}
.insight-observation,.insight-limitation{white-space:pre-line}
.insight-table{margin:12px 0 4px}
.insight-table table{font-size:12px}
.insight-table :is(th,td){border-bottom-color:var(--line-ac)}
.insight-caption{font-size:12px;color:var(--mut);margin:6px 0 0}
.insight-episode{display:flex;gap:10px;margin:12px 0 0;font-size:13px}
.insight-episode b{flex:none;font:500 12px/1.75 var(--mono);color:var(--mut)}
.insight-limitation{font-size:12px;color:var(--mut);margin:12px 0 0}
.profile-bottom{padding:10px 12px 16px}
.profile-bottom button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 8px;border:0;border-radius:7px;background:none;color:var(--ac);font:500 12px/1 var(--body);cursor:pointer}
.profile-bottom button:hover{background:var(--tint-ac)}
.profile-bottom .ico{width:14px;height:14px;transition:transform .15s}
.profile-bottom button[aria-expanded=true] .ico{transform:rotate(180deg)}
.profile-empty{font-size:13px;color:var(--mut);margin:12px 20px 18px}
/* Итоги исцеления под профилем: подпись и число в формате профиля, у неизвестного - причина. */
.profile-facts{display:flex;flex-wrap:wrap;gap:16px 44px;margin:0;padding:18px 24px 22px;border-top:1px solid var(--line)}
.profile-facts>div{min-width:0}
.profile-facts dt{font-size:12px;line-height:1.5;color:var(--mut);margin:0 0 3px}
.profile-facts dd{margin:0;font:500 15px/1.5 var(--mono);color:var(--fg);font-variant-numeric:tabular-nums}
.profile-fact-note{font:13px/1.5 var(--body);color:var(--mut)}
/* Способность под итогом перераспределения: «Spirit Link: вы -422 группа -545 HPS». */
.profile-fact-pair{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-top:4px;font-size:13px}
.profile-fact-pair>span{font:12px var(--body);color:var(--mut)}
.profile-fact-pair>.profile-fact-name{margin-right:4px;color:var(--fg)}
.profile-fact-name a.wh{color:var(--fg)}
.profile-fact-pair>span+b{margin-right:6px}
.profile-fact-pair small{font:10px var(--mono);color:var(--mut)}
.comparison-widget{padding:0}
.comparison-widget>summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 24px;list-style:none;cursor:pointer}
.comparison-widget>summary::-webkit-details-marker{display:none}
.comparison-widget>summary small{display:block;color:var(--mut);font-size:11px;line-height:1.7;margin-top:4px}
.disclosure-chevron{width:18px;height:18px;flex:0 0 18px;margin-left:auto;fill:none;stroke:var(--mut);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.comparison-widget[open]>summary{border-bottom:1px solid var(--line)}
.comparison-widget[open]>summary .disclosure-chevron{transform:rotate(180deg)}
/* The grid sits on the panel itself (no box in a box); 12 px inside plus the cell padding puts the
   labels on the heading's vertical. */
.comparison-body{padding:6px 12px 18px}
.comparison-body>.hint{margin:12px 12px 0}
/* Players as columns: each column is one player's run card with that player's values below it, so a
   name appears once and both item levels sit under their source (Armory now, the run log). Player
   columns share the width; the label and top-50 columns keep theirs. Below the per-column floor
   (--gear-cols, set by the template) the grid scrolls inside its panel rather than squeeze a DPS
   figure into its neighbour. */
.gear-grid table{margin:0;table-layout:fixed;min-width:max(640px,calc(160px + var(--gear-cols,4) * 130px))}
.gear-grid .gear-grid-label{width:160px}
.gear-grid .gear-grid-cohort{width:15%;border-left:1px solid var(--line)}
.gear-grid .gear-grid-you{background:var(--tint-you)}
.gear-grid-solo table{width:auto}
.gear-grid-solo col{width:230px}
.gear-grid-solo .gear-grid-label{width:160px}
.gear-grid table :is(th,td){padding:10px 12px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--softline)}
.gear-grid thead :is(th,td){vertical-align:top;padding-top:16px;padding-bottom:16px;border-bottom-color:var(--line)}
.gear-grid thead td.gear-corner{font:400 11px/1.6 var(--body);color:var(--mut)}
.gear-name{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;font:500 12px var(--body);color:var(--fg);overflow-wrap:anywhere}
.gear-grid .gear-name a{color:var(--fg)}
.gear-grid .gear-name a:hover{color:var(--ac)}
.gear-you{font:10px var(--body);color:var(--ac)}
.gear-rate{display:block;font:500 22px var(--disp);color:var(--peer-num);margin-top:10px;white-space:nowrap}
.gear-col-you .gear-rate{color:var(--ac)}
.gear-rate small{font:10px var(--mono);color:var(--mut)}
.gear-meta{display:block;font:11px/1.6 var(--body);color:var(--mut)}
/* Numbers: yours in the accent, everyone else's in the group tone; text cells stay Golos. */
.gear-grid tbody th{font:400 11px var(--body);color:var(--mut);white-space:nowrap}
.gear-grid tbody td{font:12px var(--mono);font-variant-numeric:tabular-nums;color:var(--peer-num);white-space:nowrap}
.gear-grid tbody td.gear-col-you{color:var(--ac)}
.gear-grid tbody tr:last-child>*{border-bottom:0}
/* A group row names the source and, per column, the profile link or why values are missing. Its
   text is centred in the row like the values: the first group stands right under the heads, where
   a large top padding glued it to the row's bottom; the line above a later group separates it. */
.gear-grid tr.gear-group>*{padding-top:12px;padding-bottom:12px;font:500 11px var(--body);color:var(--fg);border-bottom-color:var(--line)}
.gear-grid tbody tr.gear-group th{white-space:normal}
.gear-grid tbody tr:not(.gear-group)+tr.gear-group>*{border-top:1px solid var(--line)}
.gear-grid tr.gear-group td{font:400 11px var(--body);color:var(--mut)}
.gear-grid tr.gear-group a{color:var(--mut)}
.gear-grid tr.gear-group a:hover{color:var(--ac)}
.gear-grid tr.gear-group td a+.gear-note::before{content:" · "}
.gear-grid a .ico{width:13px;height:13px;vertical-align:-2px} /* an external link's mark at text size */
/* Service links next to the data (DESIGN.md «Цвет»): no underline, the row's size, accent on hover. */
.gear-grid a{text-decoration:none}
.gear-grid tr.gear-group a.ext{font-size:inherit}
.gear-grid .skel{display:inline-block;vertical-align:middle;width:3.2em;height:8px;margin:0}
.gear-grid .gear-col-you .skel{background:var(--line)} /* on the you-tint the panel-toned skeleton disappears */
.gear-buffs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:26px}
.gear-buffs a.gear-effect{--spell-icon-size:26px;display:inline-block;flex:none;width:26px;height:26px;padding:0!important;border-radius:4px;background:var(--panel2)!important;outline-offset:3px}
.gear-buffs a.gear-effect:hover{outline:1px solid var(--ring-ac);outline-offset:1px}
.gear-effect-name{font:11px/1.5 var(--body);color:var(--mut)}
/* Phone: the labels take a narrow column that stays put while the players scroll sideways. */
@media(max-width:650px){
.gear-grid table{min-width:max(560px,calc(112px + var(--gear-cols,4) * 116px))}
.gear-grid .gear-grid-label{width:112px}
.gear-grid tr>:first-child{position:sticky;left:0;z-index:1;background:var(--panel);padding-left:6px;white-space:normal;box-shadow:inset -1px 0 0 var(--line)}
}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.build-option{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 18px;align-items:center;padding:14px 0;border-bottom:1px solid var(--softline)}
.build-option:last-child{border-bottom:0;padding-bottom:0}
.build-name b{display:block;font-size:13px;font-weight:500}
.build-name small{display:block;font-size:11px;color:var(--mut);margin-top:2px}
.build-name small>span{margin-left:6px;color:var(--ac);white-space:nowrap}
.build-track{grid-column:1/-1;height:5px;background:var(--panel2);border-radius:3px;overflow:hidden}
.build-track span{display:block;height:100%;border-radius:3px;background:var(--peer)}
.build-current .build-track span{background:var(--ac)}
.build-share{text-align:right;font:12px var(--mono);white-space:nowrap}
.analysis-table-scroll{overflow-x:auto;max-width:100%}
.analysis-table-scroll table{border-collapse:collapse;width:100%;font-size:11px;white-space:normal}
.analysis-table-scroll th,.analysis-table-scroll td{padding:10px 9px;border-bottom:1px solid var(--line);text-align:right}
.analysis-table-scroll th:first-child,.analysis-table-scroll td:first-child{text-align:left}
.analysis-table-scroll th{font-weight:500;color:var(--mut)}

/* ---- разбор идёт: что уже сделано и что сейчас ---- */
/* Заголовок, текст и шаги начинаются от поля поверхности, как h2 соседних разделов; индикатор идёт
   после слов заголовка. */
.analysis-pending{padding:24px}
.pending-heading{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.pending-heading .status-spinner{flex:none;width:16px;height:16px;margin:0}
.pending-text{font-size:13px;line-height:1.7;color:var(--mut);margin:0 0 14px;max-width:72ch}
.progress-steps{list-style:none;margin:0 0 18px;padding:0;font-size:13px;line-height:1.6}
.progress-steps>li{display:flex;align-items:center;gap:9px;padding:3px 0;color:var(--mut)}
.progress-steps .ico{width:14px;height:14px;color:var(--mut)}
.progress-steps>.cur{color:var(--fg);font-weight:500}
.progress-steps>.cur::before{content:"";flex:none;width:6px;height:6px;margin:0 4px;border-radius:50%;background:var(--fg)}
.analysis-pending [data-notify].voted{color:var(--ac);border-color:var(--line-ac)}
/* Место профиля до данных забега: заголовок с двумя итогами и строки той же высоты, что у профиля. */
.facts-skeleton{padding:0;overflow:hidden}
.facts-skeleton .skel{display:block;margin:0}
.facts-skeleton-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px 18px;border-bottom:1px solid var(--line)}
.facts-skeleton-totals{display:flex;gap:26px;flex-shrink:0}
.facts-skeleton-totals>div{display:flex;flex-direction:column;gap:12px;width:120px;padding:4px 0}
.facts-skeleton-totals>div+div{padding-left:26px;border-left:1px solid var(--line)}
.facts-skeleton-totals .skel:first-child{height:26px;width:100%}
.facts-skeleton-totals .skel:last-child{height:10px;width:70%}
.facts-skeleton-rows{padding:8px 24px 16px}
.facts-skeleton-rows>div{display:grid;grid-template-columns:230px minmax(0,1fr) 108px;gap:20px;align-items:center;min-height:62px;border-top:1px solid var(--softline)}
.facts-skeleton-rows>div:first-child{border-top:0}
.facts-skeleton-rows .skel:first-child{width:70%}
.facts-skeleton-rows .skel:nth-child(2){height:7px;width:60%}

/* ---- ошибка и разбор, которого нет: оттенок и обычная рамка ---- */
.analysis-error{background:var(--tint-warn)}
.analysis-error>p,.analysis-gone>p{font-size:13px;line-height:1.7;color:var(--fg);margin:8px 0 0;max-width:72ch}
.analysis-error-reason{margin:14px 0 0;font-size:12px;color:var(--mut)}
.analysis-error-reason>summary{cursor:pointer;width:fit-content}
.analysis-error-reason>summary:hover{color:var(--fg)}
.analysis-error-reason p{margin:10px 0 0;font:12px/1.7 var(--mono);color:var(--fg);white-space:pre-wrap;overflow-wrap:anywhere;max-height:200px;overflow:auto}
.analysis-error>.btn,.analysis-gone>.btn{margin-top:18px}

/* ---- возврат к месту чтения ---- */
.analysis-return{position:fixed;bottom:20px;right:24px;z-index:21;width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;background:var(--tint-ac);border:1px solid var(--ring-ac);border-radius:10px;color:var(--ac);box-shadow:0 4px 18px var(--scrim);cursor:pointer}
.analysis-return svg{flex-shrink:0;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.analysis-return.return-down svg{transform:rotate(180deg)}
.analysis-return:hover:not(:disabled){background:var(--tint-ac2)}
.analysis-return-label{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:7px 10px;font:12px/1.5 var(--body);color:var(--fg);opacity:0;pointer-events:none}
.analysis-return:focus-visible .analysis-return-label{opacity:1}
@media(hover:hover){.analysis-return:hover .analysis-return-label{opacity:1}}

/* ---- обсуждение: вопрос справа оттенком «вы», ответ модели текстом на поверхности; лента растёт
   вместе со страницей, своей прокрутки у неё нет ---- */
.discussion .chatlog{display:flex;flex-direction:column;gap:16px;margin:0 0 20px;max-height:none;overflow:visible}
.discussion .chatlog:empty{display:none}
.discussion .bubble{max-width:min(80ch,100%);margin:0;padding:0;border-radius:0;background:none;font-size:14px;line-height:1.7;overflow-wrap:anywhere}
.discussion .bubble.user{align-self:flex-end;max-width:min(64ch,85%);padding:10px 14px;border-radius:10px;background:var(--tint-ac2);color:var(--fg);white-space:pre-wrap}
.discussion .bubble.assistant{align-self:flex-start;color:var(--fg)}
.discussion .bubble.assistant>:first-child{margin-top:0}
.discussion .bubble.assistant>:last-child{margin-bottom:0}
.discussion .bubble.assistant :is(p,ul,ol){margin:0 0 10px}
.discussion .bubble.assistant :is(ul,ol){padding-left:20px}
.discussion .bubble.assistant strong{font-weight:600;color:var(--fg)}
/* Code in an answer (an APL line the reader asked for) wraps inside the answer: a SimC line has no
   space to break at and ran past the surface. No ligatures: JetBrains Mono draws ">=" as "≥", which
   is not the text of the line. */
.discussion .bubble.assistant pre{max-width:100%;margin:0 0 10px;padding:10px 12px;border-radius:8px;background:var(--sunken);font:12px/1.6 var(--mono);color:var(--fg);white-space:pre-wrap;overflow-wrap:anywhere}
.discussion .bubble.assistant code{font-family:var(--mono);font-size:.9em;font-variant-ligatures:none}
.discussion .bubble.assistant pre code{font-size:inherit}
/* Блоки ответа (mdToHTML). Свёрнутые подробности: строки APL, расчёт; ответ читается без них.
   Шеврон нарисован рамкой псевдоэлемента: в разметке ответа нет SVG, где termWrap искал бы имена. */
.answer-more{margin:4px 0 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
.answer-more>summary{display:flex;align-items:center;gap:12px;padding:9px 12px;list-style:none;cursor:pointer;border-radius:8px;font:500 13px/1.5 var(--body);color:var(--fg);transition:background-color .15s}
.answer-more>summary::-webkit-details-marker{display:none}
.answer-more>summary::after{content:"";flex:none;width:7px;height:7px;margin:0 4px 4px auto;border-right:1.6px solid var(--mut);border-bottom:1.6px solid var(--mut);transform:rotate(45deg);transition:transform .15s}
.answer-more[open]>summary::after{margin-bottom:-3px;transform:rotate(-135deg)}
.answer-more>summary:hover{background:var(--tint-ac)}
.answer-more>summary:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.answer-more[open]>summary{border-bottom:1px solid var(--line);border-radius:8px 8px 0 0}
.answer-more-title{min-width:0}
.answer-more-body{padding:12px}
.answer-more-body>:last-child{margin-bottom:0!important}
/* Последовательность нажатий: полоса иконок (ритм; нажатия одного момента стопкой, первое на линии)
   и нумерованный список с названиями и пометками. Полоса прокручивается внутри ответа. */
.seq{max-width:100%;margin:4px 0 12px;padding:14px 16px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
.seq-title{margin:0 0 12px!important;font:500 13px/1.5 var(--body);color:var(--mut)}
.seq-strip{overflow-x:auto;margin:0 -16px 10px;padding:0 16px 6px}
.discussion .bubble.assistant .seq-strip ol,.seq-strip ol{position:relative;display:flex;align-items:flex-end;gap:10px;width:max-content;min-width:100%;margin:0;padding:0;list-style:none}
.seq-strip ol::before{content:"";position:absolute;left:20px;right:20px;bottom:42px;height:2px;background:var(--line)}
.seq-strip li{display:flex;flex:none;flex-direction:column;align-items:center;gap:6px}
.seq-stack{display:flex;flex-direction:column;align-items:center;gap:4px}
.seq-tile{position:relative;z-index:1;display:grid;place-items:center;min-width:40px;height:40px;padding:0 9px;border:1px solid var(--line);border-radius:5px;background:var(--panel);font:500 11px/1.2 var(--body);color:var(--mut);white-space:nowrap}
.seq-tile:has(>a.wh){width:40px;padding:0;border-color:#454550}
/* Подпись без иконки над линией (зелье, аксессуар) не раздвигает колонку: соседние колонки над линией обычно пусты. */
.seq-stack>.seq-tile:not(:last-child):not(:has(>a.wh)){margin-inline:-26px}
.seq-tile>a.wh,.analysis-page .discussion .bubble .seq-tile>a.wh{display:block;width:100%;height:100%;padding:0!important;border:0;font-size:0;color:var(--mut);text-decoration:none}
.seq-tile>a.wh>.iconlarge{position:absolute!important;inset:0!important;display:block;width:auto!important;height:auto!important;margin:0!important;border-radius:4px;overflow:hidden}
.seq-tile>a.wh>.iconlarge>ins{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;background-size:cover!important;background-position:center!important}
.seq-tile>a.wh>.iconlarge>del{display:none!important}
/* Пока Wowhead не поставил иконку, в плитке название мелким шрифтом. */
.seq-tile>a.wh:not([data-wh-icon-added]){display:grid;place-items:center;padding:2px!important;overflow:hidden;font-size:8px;line-height:1.1;text-align:center;white-space:normal}
.seq-n{font:500 10px/16px var(--mono);color:var(--mut)}
.discussion .bubble.assistant .seq-list,.seq-list{margin:0;padding-left:22px;font-size:13px;line-height:1.75}
.seq-list li::marker{font:500 11px var(--mono);color:var(--mut)}
.seq-plus,.seq-note{color:var(--mut)}
.discussion .bubble.pending{display:flex;align-items:center;gap:10px;color:var(--mut);font-style:normal}
.discussion .bubble.pending .spinner{width:14px;height:14px;margin:0}
.discussion .bubble.err-bubble{align-self:stretch;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--tint-bad);color:var(--fg);font-size:13px}
.discussion form{margin:0}
.discussion-suggestions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.discussion-suggestions button{font:13px/1.5 var(--body);text-align:left;color:var(--fg);border:1px solid var(--line);border-radius:8px;background:transparent;padding:7px 12px;cursor:pointer;transition:background-color .15s,border-color .15s}
.discussion-suggestions button:hover:not(:disabled){background:var(--tint-ac);border-color:var(--ring-ac)}
/* Starters only fill an empty question: they step aside once the reader types or the chat has begun. */
.discussion:has(.bubble.user) .discussion-suggestions,.discussion:has(textarea:not(:placeholder-shown)) .discussion-suggestions{display:none}
.discussion-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:12px}
.discussion-actions small{font-size:12px;line-height:1.6;color:var(--mut);max-width:460px}
.discussion-actions .btn{flex-shrink:0;min-width:132px}
.discussion-actions .spinner{width:12px;height:12px;margin:0 0 0 2px;border-color:color-mix(in srgb,var(--bg) 25%,transparent);border-top-color:var(--bg)}

/* ---- публичная страница: шапка с логотипом, языком названий и входом в сервис ---- */
.shared-top{display:flex;align-items:center;flex-wrap:wrap;gap:16px 24px;margin:8px 0 26px}
.shared-brand{flex:1 1 auto;min-width:0}
.shared-brand p{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--mut)}
.lang-switch{order:1;display:flex;align-items:center;gap:10px;margin:0;font-size:12px;color:var(--mut)}
.lang-switch .profile-view button{padding:4px 10px;font-size:12px}
.shared-cta{order:2}
.shared-missing{margin-top:4px}

@media(min-width:651px) and (max-width:1320px){
.profile-heading{flex-wrap:wrap;gap:16px}
.profile-grid{grid-template-columns:175px minmax(45px,1fr) 80px 84px 98px;gap:12px}
.profile-ability{font-size:13px}
.profile-source .profile-values,.profile-difference{font-size:12px}
}
@media(max-width:1180px){
.advice-card{grid-template-columns:26px minmax(0,1fr) 220px}
}
@media(max-width:900px){
.advice-card{grid-template-columns:26px minmax(0,1fr);row-gap:16px}
.advice-side{grid-column:2;height:auto;padding-left:0;gap:14px}
.profile-jumps{flex-direction:row;flex-wrap:wrap}
.advice-side-label{flex-basis:100%}
.advice-feedback>span{flex-basis:auto;margin-right:auto}
.run-hero h1{font-size:30px}
.hero-menu{position:static}
.hero-pop{width:min(420px,100%)}
}
@media(max-width:650px){
.analysis-page :is(#takeaway,#recommendations,#profile,#comparison,#chatCard,.profile-widget,.profile-source,.advice-card){scroll-margin-top:62px}
.page-toc{font-size:12px;gap:12px}
.toc-links{gap:18px;padding:12px 0}
.toc-count{display:none}
/* На телефоне состояние - значок; слова остаются для чтения с экрана. */
.toc-status{padding:0;width:30px;height:28px;justify-content:center}
.toc-status>span:not(.spinner){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-wide{display:none}
.run-hero{padding-top:8px}
.run-hero h1{font-size:28px}
.hero-eyebrow{font-size:13px}
.run-meta{font-size:12px}
.run-meta>span+span::before{margin:0 7px}
.analysis-surface,.advice-card{padding:18px}
.analysis-pending{padding:18px}
.advice-card,.advice-card:not(:has(>.advice-side)){grid-template-columns:22px minmax(0,1fr);column-gap:12px}
.advice-number{min-width:22px;height:22px;font-size:11px}
.advice-body>h3{margin-top:0}
.profile-widget,.comparison-widget,.facts-skeleton{padding:0}
.profile-heading{flex-direction:column;align-items:stretch;padding:18px;gap:18px}
.headline-metrics{width:100%;column-gap:22px}
.headline-metrics>div{min-width:0}
.headline-metrics>div+div{padding-left:0;border-left:0;position:relative}
.headline-metrics>div+div::before{content:"";position:absolute;top:0;bottom:0;left:-11px;width:1px;background:var(--line)}
.headline-metrics b{font-size:25px}
.headline-metrics>div>span{font-size:11px}
.headline-metrics strong{font-size:13px}
.headline-metrics p{font-size:11px}
.profile-controls{padding:15px 16px 10px;gap:12px}
.profile-tabs button{padding:8px 7px;font-size:12px}
.profile-view button{font-size:12px}
.profile-panel{padding:0 8px 6px}
.profile-grid{grid-template-columns:minmax(45px,1fr) 78px 69px 32px;gap:8px 9px;padding:12px 6px 12px 10px}
.profile-source>.profile-grid{min-height:87px}
.profile-ability{grid-column:1/4;grid-row:1;font-size:13px}
.profile-track{grid-row:2;grid-column:1}
.profile-values{grid-row:2;grid-column:2;font-size:12px}
.profile-difference{grid-row:2;grid-column:3;font-size:12px}
.profile-expand{grid-column:4;grid-row:1/3;width:32px;padding:0;justify-content:center}
.profile-expand-label{display:none}
.profile-table-head{padding:6px 6px 10px 10px;align-items:start;font-size:11px}
.profile-table-head>span:first-child{display:none}
.profile-table-head .profile-track{grid-column:1;grid-row:1}
.profile-table-head .profile-values{grid-column:2;grid-row:1}
.profile-table-head .profile-difference-head{grid-column:3;grid-row:1}
.profile-table-head>span:last-child{grid-column:4;grid-row:1}
.profile-context{padding:2px 12px 18px 10px}
.profile-insight{font-size:13px}
.profile-bottom{padding:8px 4px 12px}
.profile-facts{padding:16px 18px 18px;gap:14px 28px}
.comparison-widget>summary{padding:18px}
.comparison-body{padding:4px 6px 14px}
.comparison-widget>summary small{font-size:10px}
.analysis-return{right:12px;bottom:12px}
.facts-skeleton-head{flex-direction:column;align-items:stretch;padding:18px;gap:18px}
.facts-skeleton-totals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.facts-skeleton-totals>div{width:auto}
.facts-skeleton-totals>div+div{padding-left:0;border-left:0}
.facts-skeleton-rows{padding:4px 16px 10px}
.facts-skeleton-rows>div{grid-template-columns:minmax(0,1fr) 78px;gap:8px 12px;min-height:87px;align-content:center}
.facts-skeleton-rows .skel:first-child{grid-column:1/-1;width:55%}
.discussion-actions{align-items:flex-start;gap:12px}
.shared-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 12px;margin-top:0}
.shared-brand{display:contents}
.shared-top .logo-lg{font-size:24px;grid-column:1;grid-row:1}
.shared-brand p{grid-column:1/-1;margin:0}
.shared-cta{grid-column:2;grid-row:1}
.lang-switch{grid-column:1/-1;margin-top:4px}
}
/* Узкий экран: пояснение под полем, как на широком, под ним кнопка во всю ширину поля. */
@media(max-width:450px){
.discussion-actions{flex-direction:column;align-items:stretch}
.discussion-actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
.analysis-page .spinner,.analysis-page .skel::after{animation:none}
.analysis-page *,.page-toc{transition:none!important}
}

/* --gutter is the side field around the report; the stuck contents reach through it to the edges of
   the column, so on a phone the bar spans the screen under the top bar instead of floating as a
   dark rectangle on the page's glow. .guest (the public page) keeps its own 16 px field. */
main:has(.analysis-page){--gutter:30px;padding-left:var(--gutter);padding-right:var(--gutter);max-width:1400px}
/* The public page has no top bar on a phone either: its contents stick to the top of the window and
   anchor jumps do not leave room for a bar that is not there. */
.guest:has(.analysis-page){--gutter:16px;--topbar:0px}
html:has(.guest .analysis-page){scroll-padding-top:0}
@media(min-width:901px) and (max-width:1320px){main:has(.analysis-page){--gutter:24px}}
/* Под верхней полосой телефона поле страницы как у полосы (16 px): вордмарк и кнопка меню стоят над
   краями содержимого, а не в нескольких пикселях от них. */
@media(max-width:900px){main:has(.analysis-page){--gutter:16px}}

/* Equipment loads after the log facts: loading cells keep the table's shape, so values fill in place. */
.comparison-widget>summary small.gear-loading-note{display:flex;align-items:center;gap:7px;margin-top:2px;color:var(--mut)}
.gear-loading-note .spinner{width:10px;height:10px;border-width:1.5px;flex:none}