/* Качество и проблемы: полоса чисел, причины по типам, пробелы базы знаний, история решений. */
#section-support-diagnostics{--wq-line:var(--ov-line,var(--color-border,#dce5eb));--wq-muted:var(--ov-muted,var(--color-text-muted,#657787));--wq-text:var(--ov-text,var(--color-text,#1c2c36));--wq-surface:var(--ov-surface,var(--color-surface,#fff));--wq-accent:var(--ov-accent,#087e78);--wq-soft:color-mix(in srgb,var(--wq-text) 5%,var(--wq-surface))}
#section-support-diagnostics .wq-period{margin:0 0 10px;font-size:12px;color:var(--wq-muted)}
/* Четыре числа чипами в одной полосе с периодом (30.09), как на Live: число, название, доля. Ноль не нажимается. */
html body.product-support #section-support-diagnostics .wq-strip #wo-diag-metrics.wq-cards{display:flex!important;flex-wrap:wrap;gap:6px;margin:0}
html body.product-support #section-support-diagnostics button.wq-card{display:inline-flex;align-items:baseline;gap:6px;width:auto;min-width:0;min-height:0!important;margin:0;padding:5px 12px!important;text-align:left;font:inherit;font-size:12px;color:var(--wq-muted)!important;cursor:pointer;background:color-mix(in srgb,var(--wq-text) 2%,var(--wq-surface))!important;border:1px solid var(--wq-line)!important;border-radius:99px!important;box-shadow:none!important;white-space:nowrap}
html body.product-support #section-support-diagnostics button.wq-card:not(:disabled):is(:hover,:focus-visible){border-color:var(--tone,var(--wq-accent))!important;color:var(--wq-text)!important}
html body.product-support #section-support-diagnostics button.wq-card.warn{--tone:var(--ov-warn,#a67019);border-color:color-mix(in srgb,var(--tone) 50%,var(--wq-line))!important}
html body.product-support #section-support-diagnostics button.wq-card.bad{--tone:var(--ov-bad,#bd554c);border-color:color-mix(in srgb,var(--tone) 55%,var(--wq-line))!important}
html body.product-support #section-support-diagnostics button.wq-card:disabled{cursor:default;opacity:.8}
#section-support-diagnostics .wq-card.off{--tone:var(--wq-muted)}
#section-support-diagnostics .wq-card strong{font-size:14px;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums;color:var(--wq-text)}
#section-support-diagnostics .wq-card.bad strong{color:var(--tone)}
#section-support-diagnostics .wq-card.zero strong{color:var(--wq-muted)}
#section-support-diagnostics .wq-card-label{font-size:12px;color:var(--wq-text)}
#section-support-diagnostics .wq-card.zero .wq-card-label{color:var(--wq-muted)}
#section-support-diagnostics .wq-card small{font-size:12px;color:var(--wq-muted);font-variant-numeric:tabular-nums}
/* Нет входящих за период: пробелы базы и история скрыты, в «Причинах» одна строка */
#section-support-diagnostics.wq-nodata :is(.wq-gaps-box,#wq-history-box){display:none}
/* Блоки-карточки */
#section-support-diagnostics .wq-box{padding:16px 18px;margin:0 0 12px}
#section-support-diagnostics .wq-box .wn-title small{line-height:1.4}
/* Причины по типам */
#section-support-diagnostics .wq-group{margin:0;padding:12px 0 4px;border-top:1px solid var(--wq-line)}
#section-support-diagnostics .wq-group:first-child{border-top:0;padding-top:0}
#section-support-diagnostics .wq-group-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:4px}
#section-support-diagnostics .wq-group-head b{font-size:14px;color:var(--wq-text)}
#section-support-diagnostics .wq-group-head small{display:block;margin-top:2px;font-size:12px;line-height:1.4;color:var(--wq-muted)}
#section-support-diagnostics .wq-group-head>span{flex:none;font-size:12px;color:var(--wq-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
#section-support-diagnostics .wq-group-head>span b{font-size:14px;margin-right:4px}
#section-support-diagnostics details.wq-calm>summary{list-style:none;cursor:pointer}
#section-support-diagnostics details.wq-calm>summary::-webkit-details-marker{display:none}
#section-support-diagnostics details.wq-calm>summary .wq-group-head>div>b::after{content:"›";display:inline-block;margin-left:8px;color:var(--wq-muted);transition:transform .15s}
#section-support-diagnostics details.wq-calm[open]>summary .wq-group-head>div>b::after{transform:rotate(90deg)}
#section-support-diagnostics .wo-reason{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;align-items:center;gap:6px 18px;padding:10px 0;margin:0;border:0;border-top:1px dashed var(--wq-line);border-radius:0;background:none;color:var(--wq-text);cursor:default;text-align:left}
#section-support-diagnostics .wq-group-head+.wo-reason,#section-support-diagnostics summary+.wo-reason{border-top:0}
#section-support-diagnostics .wo-reason div{display:block}
#section-support-diagnostics .wq-reason-main{min-width:0}
#section-support-diagnostics .wq-reason-main b{display:block;font-size:13px;font-weight:600;overflow-wrap:anywhere}
#section-support-diagnostics .wo-reason small{display:block;margin-top:2px;font-size:12px;line-height:1.4;color:var(--wq-muted)}
#section-support-diagnostics .wq-reason-num span{display:block;font-size:12px;color:var(--wq-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
#section-support-diagnostics .wq-reason-num span b{font-size:13px;color:var(--wq-text);margin-right:4px}
#section-support-diagnostics .wo-reason i{display:block;height:4px;margin:6px 0 0;border-radius:99px;background:linear-gradient(to right,var(--wq-accent) var(--wq-w,0%),var(--wq-soft) var(--wq-w,0%))}
#section-support-diagnostics .wq-calm .wo-reason i{background:linear-gradient(to right,color-mix(in srgb,var(--wq-muted) 60%,var(--wq-surface)) var(--wq-w,0%),var(--wq-soft) var(--wq-w,0%))}
/* Текстовые кнопки */
#section-support-diagnostics .support-btn.wq-link,#section-support-diagnostics .support-btn.wq-more{min-height:0!important;padding:6px 10px!important;font-size:12px!important;color:var(--wq-accent)!important;white-space:nowrap}
#section-support-diagnostics .support-btn.wq-more{margin-top:10px}
#section-support-diagnostics .wq-reset{margin-left:6px;padding:0;border:0;background:none;color:var(--wq-accent);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
/* Чего не хватило базе знаний */
#section-support-diagnostics .wq-gaps{margin:0;padding:0;list-style:none}
#section-support-diagnostics .wq-gaps li{display:flex;justify-content:space-between;align-items:center;gap:8px 16px;padding:10px 0;border-top:1px solid var(--wq-line)}
#section-support-diagnostics .wq-gaps li:first-child{border-top:0;padding-top:0}
#section-support-diagnostics .wq-gap-text{min-width:0}
#section-support-diagnostics .wq-gap-text b{display:block;font-size:13px;font-weight:600;overflow-wrap:anywhere}
#section-support-diagnostics .wq-gap-text small{display:block;margin-top:2px;font-size:12px;color:var(--wq-muted)}
#section-support-diagnostics .wq-gap-actions{display:flex;flex:none;gap:6px}
#section-support-diagnostics .wq-gap-actions .support-btn:not(.wq-link){min-height:0!important;padding:6px 10px!important;white-space:nowrap}
/* История решений */
#section-support-diagnostics #wq-history-box #wo-history-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;margin:0 0 12px;padding:0;border:0;background:none}
#section-support-diagnostics #wo-history-form label{display:grid;gap:4px;font-size:12px;color:var(--wq-muted);min-width:0}
#section-support-diagnostics #wo-history-form label.wq-grow{flex:1 1 220px}
#section-support-diagnostics #wo-history-form label.wq-toggle{display:flex;align-items:center;gap:6px;min-height:36px;font-size:13px;color:var(--wq-text);cursor:pointer}
#section-support-diagnostics #wo-history-form label.wq-toggle:has(input:disabled){color:var(--wq-muted);cursor:default}
#section-support-diagnostics #wo-history-form :is(input[type=search],select){box-sizing:border-box;width:100%;max-width:100%;min-width:0}
#section-support-diagnostics #wo-history-form select{max-width:280px}
#section-support-diagnostics #wq-history-box #wo-history{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
#section-support-diagnostics .wq-table .wq-problem{color:var(--ov-warn,#a67019)}
#section-support-diagnostics .wq-table .c-badge{max-width:100%;overflow:hidden;text-overflow:ellipsis}
#section-support-diagnostics .wq-pages{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:10px;font-size:12px;color:var(--wq-muted)}
#section-support-diagnostics .wq-pages:empty{display:none}
/* Как считается */
#section-support-diagnostics .wq-how{margin:0 0 16px}
#section-support-diagnostics .wq-how summary{cursor:pointer}
#section-support-diagnostics .wq-how-list{margin:8px 0 0;padding-left:18px;display:grid;gap:6px;font-size:13px;line-height:1.55;color:var(--wq-muted)}
@media (max-width:640px){
 #section-support-diagnostics .wq-box{padding:14px}
 #section-support-diagnostics .wo-reason{grid-template-columns:minmax(0,1fr) auto}
 #section-support-diagnostics .wq-reason-main{grid-column:1/-1}
 #section-support-diagnostics .wq-gaps li{flex-direction:column;align-items:stretch}
 #section-support-diagnostics .wq-gap-actions{flex-wrap:wrap}
 #section-support-diagnostics #wo-history-form select{max-width:100%}
 #section-support-diagnostics #wo-history-form label:not(.wq-toggle){flex:1 1 100%}
}
@media (max-width:420px){html body.product-support #section-support-diagnostics button.wq-card{white-space:normal}}