/* Граф «проверки → нормы» на главной. Палитра — переменные из v2.css
   (--ink/--on-dark/--accent/--muted/--rule-dark), своих цветов нет. */

.graph{position:relative;isolation:isolate;margin-top:1rem}
.graph-links{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;z-index:0}
.graph-links path{fill:none;stroke:var(--on-dark);stroke-opacity:.16;stroke-width:1.25;
  transition:stroke-opacity .3s,stroke .3s;stroke-linecap:round}
.graph-links path.lit{stroke:var(--accent);stroke-opacity:.95;stroke-width:1.5}
.graph.dim .graph-links path:not(.lit){stroke-opacity:.05}

.ggrid{position:relative;z-index:1;display:grid;gap:2.5rem 2.75rem;
  grid-template-columns:1.15fr 1fr 1.05fr;align-items:start;
  transition:filter .3s ease,opacity .3s ease,transform .3s ease}
.gcol{display:flex;flex-direction:column;gap:2.25rem;min-width:0}
.ggrp{min-width:0}
.graph.drilled .ggrid{filter:blur(6px) saturate(.4);opacity:.35;transform:scale(.97)}

.ghub{display:flex;align-items:baseline;gap:.625rem;position:relative;
  padding:.25rem 0 .5rem;cursor:pointer;outline:none;background:none;border:0;
  color:inherit;font:inherit;text-align:left;width:100%}
.ghub .gttl{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dark);white-space:nowrap;transition:color .18s}
.ghub .gcnt{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.12em;
  color:var(--muted);white-space:nowrap;transition:color .18s}
.graph.dim .ghub:not(.glit) .gttl,.graph.dim .ghub:not(.glit) .gcnt{color:#4a4a4e}
.ghub:hover .gttl,.ghub:focus-visible .gttl,.ghub.glit .gttl{color:var(--accent)}
.ghub:focus-visible{box-shadow:0 0 0 2px var(--accent);border-radius:3px}

.gdot{position:relative;flex:none;display:block;width:5px;height:5px;border-radius:999px;
  background:var(--on-dark);opacity:.55;transition:opacity .18s,transform .18s,background .18s}
.ghub .gdot{width:10px;height:10px;background:var(--accent);opacity:1;transform:translateY(-1px)}
.ghub.glit .gdot{transform:translateY(-1px) scale(1.25)}

.gchecks{list-style:none;margin:0;padding:0 0 0 1.375rem;
  display:flex;flex-direction:column;gap:.125rem}
.gchk{display:flex;align-items:center;gap:.625rem;padding:.3125rem 0;
  cursor:pointer;outline:none;position:relative;background:none;border:0;
  color:inherit;font:inherit;text-align:left;width:100%;text-decoration:none}
.gchk .glb{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--on-dark-muted);line-height:1.35;transition:color .18s}
.gchk .gpen{margin-left:auto;padding-left:.75rem;font-family:var(--font-mono);
  font-size:.625rem;letter-spacing:.04em;color:#5b5b60;white-space:nowrap;
  transition:color .18s;font-variant-numeric:tabular-nums}
.gchk[data-heavy] .gpen{color:#7a7a80}
.gchk:hover .glb,.gchk:focus-visible .glb,.gchk.glit .glb{color:var(--on-dark)}
.gchk:hover .gdot,.gchk:focus-visible .gdot,.gchk.glit .gdot{opacity:1;background:var(--accent);
  transform:scale(1.5)}
.gchk:hover .gpen,.gchk:focus-visible .gpen,.gchk.glit .gpen{color:var(--accent)}
.gchk:focus-visible{box-shadow:0 0 0 2px var(--accent);border-radius:3px}
.graph.dim .gchk:not(.glit) .glb{color:#48484c}
.graph.dim .gchk:not(.glit) .gpen{color:#333336}
.graph.dim .gchk:not(.glit) .gdot{opacity:.18}

.gcaption{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-top:3rem;
  display:flex;gap:1.5rem;flex-wrap:wrap}

/* ─── Дрилл: слои погружения ─── */
.glayer{position:fixed;inset:0;z-index:200}
.glayer[hidden]{display:none}
.glayer.gshow .gbackdrop{opacity:1}
.gbackdrop{position:absolute;inset:0;background:rgba(3,3,4,.72);
  backdrop-filter:blur(2px);opacity:0;transition:opacity .3s ease}

.gpanel{position:absolute;background:#151518;border:1px solid var(--rule-dark);
  border-radius:14px;box-shadow:0 30px 70px rgba(0,0,0,.55);
  max-width:560px;width:min(92vw,560px);max-height:82vh;overflow:auto;
  padding:2rem 2.25rem 2.25rem;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.55);opacity:0;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .28s ease}
.glayer.gshow .gpanel{transform:translate(-50%,-50%) scale(1);opacity:1}

/* C3. Полоса прокрутки в панели.
   Убрать прокрутку совсем не выходит и не должно: тело карточки — дословный
   текст из scanner.py, а он разной длины (от одной строки у TRACKERS_BEFORE_CONSENT
   до ~700 знаков с перечнем 14 подразделов у ED_NO_SVEDEN_SECTION). Уложить
   всё без скролла можно было бы только урезав юридический текст или спрятав
   блоки за раскрывашки — и то и другое хуже, чем прокрутка. Поэтому один способ
   на все карточки: скролл остаётся, но перестаёт быть системным виджетом —
   тонкая дорожка в цветах панели, ползунок из того же --rule-dark, что и
   разделители блоков. Плюс запас по высоте, чтобы у коротких карточек
   прокрутки не возникало вовсе. */
.gpanel{scrollbar-width:thin;scrollbar-color:rgba(242,242,240,.22) transparent;
  overscroll-behavior:contain;max-height:min(86vh,44rem)}
.gpanel::-webkit-scrollbar{width:10px}
.gpanel::-webkit-scrollbar-track{background:transparent}
.gpanel::-webkit-scrollbar-thumb{background:var(--rule-dark);border-radius:999px;
  border:3px solid transparent;background-clip:content-box}
.gpanel:hover::-webkit-scrollbar-thumb{background:rgba(242,242,240,.28);
  background-clip:content-box;border:3px solid transparent}

.gcrumb{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 1rem;display:flex;
  align-items:center;gap:.5rem;flex-wrap:wrap}
.gcrumb .gsep{opacity:.5}
.gcrumb button{background:none;border:0;color:var(--muted);font:inherit;
  font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;padding:0}
.gcrumb button:hover,.gcrumb button:focus-visible{color:var(--accent)}

.gpanel h3{font-size:1.375rem;line-height:1.3;font-weight:400;margin:0 0 .875rem;
  letter-spacing:-.01em;color:var(--on-dark)}
.gpanel .gdesc{color:var(--on-dark-muted);font-size:.9375rem;margin:0 0 1.25rem}
.gpanel .gmeta{display:flex;flex-wrap:wrap;gap:.5rem .875rem;margin:0 0 1.5rem;
  padding:0;list-style:none}
.gpanel .gmeta li{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em;
  color:var(--on-dark-muted);border:1px solid var(--rule-dark);border-radius:999px;
  padding:.3125rem .75rem}
.gpanel .gmeta li b{color:var(--on-dark);font-weight:400}
.gpanel .gmore{display:inline-block;font-family:var(--font-mono);font-size:.75rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
  text-decoration:none;border-bottom:1px solid rgba(11,132,224,.4);padding-bottom:.125rem}
.gpanel .gmore:hover{border-color:var(--accent)}

.gpanel-close{position:absolute;top:1rem;right:1rem;width:2rem;height:2rem;
  border-radius:999px;border:1px solid var(--rule-dark);background:none;
  color:var(--on-dark-muted);cursor:pointer;font-size:1rem;line-height:1;
  display:flex;align-items:center;justify-content:center}
.gpanel-close:hover,.gpanel-close:focus-visible{color:var(--on-dark);border-color:var(--accent)}

.gfocus-list{list-style:none;margin:1.25rem 0 0;padding:0;
  display:flex;flex-direction:column;gap:.125rem}
.gfocus-list button{display:flex;align-items:center;gap:.75rem;width:100%;
  background:none;border:0;color:inherit;font:inherit;text-align:left;
  padding:.625rem .5rem;border-radius:8px;cursor:pointer}
.gfocus-list button:hover,.gfocus-list button:focus-visible{background:rgba(11,132,224,.1)}
.gfocus-list .glb{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.05em;
  text-transform:uppercase;flex:1 1 auto}
.gfocus-list .gpen{font-family:var(--font-mono);font-size:.6875rem;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.gfocus-list .gdot{width:6px;height:6px;flex:none;background:var(--accent);opacity:.7}

@media(max-width:900px){
  .ggrid{grid-template-columns:1fr 1fr;gap:2rem 2rem}
}
@media(max-width:640px){
  .ggrid{grid-template-columns:1fr;gap:1.75rem}
  .gcol{gap:1.75rem}
  .gchk{align-items:flex-start}
  .gchk .gdot{margin-top:.375rem}
  .gchk .glb{flex:1 1 auto;font-size:.625rem}
  .gchk .gpen{font-size:.5625rem;padding-left:.5rem}
  .gchecks{padding-left:1rem}
  .gpanel{width:100vw;max-width:100vw;max-height:100vh;height:100vh;
    top:0;left:0;right:0;bottom:0;border-radius:0;
    transform:translateY(16px) scale(.98);padding:1.5rem 1.25rem 2rem}
  .glayer.gshow .gpanel{transform:translateY(0) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important}
}

/* Проверка, у которой в базе знаний нет статьи, отличается от остальных только
   отсутствующим блоком «что делать»: карточка у неё такая же содержательная,
   поэтому гасить её (как было раньше) больше нельзя — вглубь уйти есть куда. */
.gchk-noref{cursor:pointer}

/* ─── Карточка проверки (уровень 2) ───────────────────────
   Раньше в панели лежало название проверки из scanner.py и строчка «статьи нет».
   Теперь генератор кладёт в <template id="gcards"> готовые блоки-ответы:
   что это, чем грозит, как узнать у себя, что делать. Здесь — их оформление. */
#gcards{display:none}

/* C1. Раньше в ярлыке стояло «P0» — код внутренней шкалы, который человеку
   впервые на сайте ничего не говорит. Теперь крупно слово («критично»),
   а код — мелкой моноширинной подписью через разделитель: он нужен только
   чтобы узнать ту же метку в отчёте скана. */
.gsev{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);
  font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.25rem .625rem;border:1px solid currentColor;
  border-radius:var(--r-pill);margin:0 0 .625rem}
.gsev-word{font-size:.75rem;letter-spacing:.12em}
.gsev-code{opacity:.6;padding-left:.5rem;margin-left:-.125rem;
  border-left:1px solid currentColor;line-height:1}
/* Оттенки — светлые варианты --crit/--warn из v2.css: на панели #151518
   тёмные версии не читаются (тот же приём, что .section-dark .sev-crit). */
.gsev-p0{color:#f08b81}
.gsev-p1{color:#e0b25f}
.gsev-p2{color:var(--on-dark-muted)}

.gblock{border-top:1px solid var(--rule-dark);padding-top:.875rem;margin-top:.875rem}
.gblock:first-child{border-top:0;padding-top:0;margin-top:0}
.gblock h4{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:400;margin:0 0 .5rem}
.gblock p{color:var(--on-dark-muted);font-size:.9375rem;line-height:1.5;
  margin:0 0 .625rem;max-width:none}
.gblock p:last-child{margin-bottom:0}
/* Название статьи базы знаний — это ссылка-обещание, а не поясняющий текст:
   оно должно читаться первым в блоке «что делать». */
.gblock .gart{color:var(--on-dark);font-size:1rem;line-height:1.35;margin-bottom:.375rem}
.gblock code{background:rgba(242,242,240,.08);color:var(--on-dark);
  font-size:.8125em;padding:.125em .375em;border-radius:var(--r-sm)}

/* Строка, с которой человек пришёл из общего перечисления: подсвечена,
   чтобы после клика было видно, где он оказался в подграфе нормы. */
.gfocus-list button.gfrom{background:rgba(11,132,224,.14)}
.gfocus-list button.gfrom .glb{color:var(--on-dark)}

/* Тело карточки проверки: генератор кладёт 23 таких блока в <template id="gcards">,
   скрипт по этому классу достаёт нужный и переносит в панель. Крючок для JS,
   но правило нужно — иначе блок не участвует в вертикальном ритме панели. */
.gcard{display:flex;flex-direction:column;gap:1rem}