/* Отчёт по видимости в нейросетях - поверх app.css сервисов Kokoc (cyk/audit/geo): только токены оттуда,
   своих цветов нет, поэтому светлая и тёмная темы работают сами. Наш бренд - --red, остальные - --steel. */
.rep-nav{position:sticky; top:64px; z-index:30; background:var(--paper); border-bottom:1px solid var(--line); margin:0 calc(var(--gutter) * -1); padding:10px var(--gutter); display:flex; gap:4px; overflow-x:auto}
.rep-nav a{padding:6px 12px; border-radius:999px; font-size:13.5px; font-weight:500; color:var(--ink-soft); text-decoration:none; white-space:nowrap}
.rep-nav a:hover{color:var(--ink); background:var(--accent-soft)}
.rep-sec{scroll-margin-top:130px; margin-top:44px; display:grid; gap:16px}
.rep-sec-h{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline; gap:6px 14px}
.rep-sec-h .n{font:600 13px/1 var(--mono); color:var(--red)}
.rep-sec-h h2{font:800 clamp(22px,2.6vw,30px)/1.1 var(--display); letter-spacing:-.03em}
.rep-sec-h p{grid-column:1 / -1; font-size:14.5px; color:var(--ink-soft); max-width:80ch}
.rep-lead{display:grid; gap:10px; margin:0; padding:0; list-style:none}
.rep-lead li{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:14px 18px 14px 44px; position:relative; font-size:15.5px; line-height:1.5}
.rep-lead li::before{content:""; position:absolute; left:18px; top:21px; width:10px; height:10px; border-radius:3px; background:var(--red)}
.summary .sum-l{line-height:1.35}
.summary .sum-n small{font:600 15px/1 var(--sans); color:var(--ink-faint); letter-spacing:0}

/* факт */
.rep-fact{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:22px 24px; display:grid; gap:12px}
.rep-fact.k5,.rep-fact.k4{border-color:var(--line-strong)}
.rep-fact-top{display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-faint)}
.rep-fact-top .no{font:600 12px/1 var(--mono); color:var(--ink-soft)}
.rep-crit{display:inline-flex; gap:3px; align-items:center}
.rep-crit i{width:14px; height:6px; border-radius:3px; background:var(--line)}
.rep-crit i.on{background:var(--red)}
.rep-fact h3{font:700 18px/1.3 var(--display); letter-spacing:-.02em}
.rep-fact .hl{font-size:16.5px; font-weight:600; line-height:1.45; color:var(--ink)}
.rep-quad{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 28px; margin-top:4px}
.rep-quad h4{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:4px}
.rep-quad p{font-size:14px; line-height:1.55; color:var(--ink-soft)}
.rep-quad .todo p{color:var(--ink)}
.rep-ev{font:400 12px/1.5 var(--mono); color:var(--ink-faint)}

/* графики: горизонтальные столбцы - HTML-сетка */
.rep-bars{display:grid; gap:7px}
.rb{display:grid; grid-template-columns:minmax(96px,30%) minmax(0,1fr) 54px; align-items:center; gap:10px; font-size:13.5px}
.rb .l{text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink)}
.rb .t{height:14px; background:var(--sunk); border-radius:4px; overflow:hidden}
.rb .t i{display:block; height:100%; border-radius:4px; background:var(--steel)}
.rb .v{font:600 13px var(--mono); color:var(--ink-soft)}
.rb.ours .t i{background:var(--red)}
.rb.ours .l,.rb.ours .v{color:var(--red); font-weight:700}

.rep-chart{width:100%; max-width:680px; height:auto; display:block}
.rep-chart text{fill:var(--ink); font:500 13px var(--sans)}
.rep-chart text.v{font:600 13px var(--mono)}
.rep-chart text.m{fill:var(--ink-faint); font-size:12px}
.rep-chart text.ours{font-weight:700}
.rep-chart .b{fill:var(--steel)}
.rep-chart .b.ours{fill:var(--red)}
.rep-chart .b.ink{fill:var(--ink-soft)}
.rep-chart .ax{stroke:var(--line-strong)}
.rep-src{font-size:12px; color:var(--ink-faint); margin-top:10px}
.rep-two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}

/* тепловая карта: интенсивность красного = доля ответов с брендом */
.rep-heat{border-collapse:separate; border-spacing:3px; width:100%}
.rep-heat thead th{position:static; background:none; border:0; padding:4px 8px}
.rep-heat tbody td{border:0; padding:0}
.rep-heat tbody tr:hover{background:none}
.rep-heat th.rh{font-size:14px; font-weight:600; color:var(--ink); text-align:left; padding:0 10px 0 0; white-space:normal; min-width:180px}
.rep-heat .c{display:block; text-align:center; padding:11px 6px; border-radius:6px; font:600 13.5px/1 var(--mono); color:var(--ink)}
.rep-heat .c.dark{color:#fff}
.rep-heat .n{color:var(--ink-faint); font:500 13px var(--mono); text-align:center; vertical-align:middle}
.rep-heat th.rh{vertical-align:middle}

/* таблицы */
.rep-t td .ours,.rep-t .ours{color:var(--red); font-weight:700}
.rep-t td.r,.rep-t th.r{text-align:right}
.rep-meter{display:inline-block; width:64px; height:6px; border-radius:3px; background:var(--sunk); vertical-align:middle; margin-left:8px; overflow:hidden}
.rep-meter i{display:block; height:100%; background:var(--steel)}
.rep-meter.ours i{background:var(--red)}

/* матрица вопросы × нейросети */
.rep-mx td.cell{text-align:center; white-space:nowrap; font:600 12.5px var(--mono)}
.rep-mx .yes{background:var(--red-soft); color:var(--red)}
.rep-mx .src{color:var(--warn)}
.rep-mx .no{color:var(--ink-faint)}
.rep-mx .na{color:var(--ink-faint); font-weight:400}
.rep-mx td.q{min-width:280px}
.rep-legend{display:flex; flex-wrap:wrap; gap:14px; font-size:13px; color:var(--ink-soft)}
.rep-legend span{display:inline-flex; align-items:center; gap:6px}
.rep-legend i{width:12px; height:12px; border-radius:3px; display:inline-block}

/* образ бренда */
.rep-quotes{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.rep-quotes li{border-left:3px solid var(--red); padding:2px 0 2px 14px; font-size:14.5px}
.rep-quotes li span{display:block; font-size:12px; color:var(--ink-faint); margin-top:2px}
.rep-tags{display:flex; flex-wrap:wrap; gap:6px}
.rep-tags span{border:1px solid var(--line-strong); border-radius:999px; padding:4px 11px; font-size:13px}
.rep-tags b{font:600 12px var(--mono); color:var(--ink-faint); margin-left:6px}
.rep-dirs{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px}
.rep-dir{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:18px 20px; display:grid; gap:8px; align-content:start}
.rep-dir h3{font:700 16px/1.3 var(--display); letter-spacing:-.02em}
.rep-dir p{font-size:14px; color:var(--ink-soft)}
.rep-dir .k{font-size:13px; color:var(--ink)}
.rep-dir .k b{color:var(--ink-faint); font-weight:600}

@media (max-width:760px){
  .rep-quad,.rep-two{grid-template-columns:1fr}
  .rep-nav{top:0}
}
@media print{
  .topbar,.rep-nav,.no-print{display:none !important}
  .rep-sec{break-inside:auto}
  .rep-fact{break-inside:avoid}
}
