/* argus_blog_engine — блоки кода. Подсветка в духе One Dark Pro на палитре GitHub Dark.
   Подсветка приходит готовой из Pygments, здесь только цвета и оформление.
   Номера строк рисуются псевдоэлементами: они не попадают ни в выделение
   мышью, ни в textContent, который читает кнопка «Копировать». */

:root {
  --syntax-comment:  #8B949E;
  --syntax-keyword:  #FF7B72;
  --syntax-string:   #A5D6FF;
  --syntax-number:   #D2A8FF;
  --syntax-function: #DCDCAA;
  --syntax-variable: #E06C75;
  --syntax-tag:      #E06C75;
  --syntax-border:   #30363D;

  /* Двух ролей в исходной палитре не было. Взяты из GitHub Dark, чтобы
     константы и типы не сливались с ключевыми словами. */
  --syntax-builtin:  #79C0FF;
  --syntax-type:     #FFA657;

  --code-gutter: #6E7681;
}

/* --- каркас блока --------------------------------------------------------- */

.code-block {
  margin: 1.5rem 0;
  border: 1px solid var(--syntax-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-secondary);
}

.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0.5rem 0.35rem 1rem;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--syntax-border);
  font-family: var(--font-body);
  font-size: 0.75rem;
}

.code-lang { color: var(--text-secondary); }

/* Кнопка видна всегда: на телефоне наведения не существует, и приём
   «показывать при hover» означал бы «не показывать никогда». */
.code-copy {
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--syntax-border);
  border-radius: 5px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.code-copy:hover,
.code-copy.is-done { color: var(--accent); border-color: var(--accent); }
.code-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* --- сам код -------------------------------------------------------------- */

.hl { overflow: hidden; background: var(--bg-secondary); }

.hl pre {
  margin: 0;
  /* Слева отступа нет: его даёт колонка номеров, иначе при горизонтальной
     прокрутке код проезжал бы через пустое поле рядом с номерами. */
  padding: 1.1rem 1.25rem 1.1rem 0;
  overflow-x: auto;
  white-space: pre;          /* никакого pre-wrap: перенос строк в коде врёт */
  tab-size: 4;
  color: var(--text-primary);
  font-family: var(--font-code);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.hl code {
  display: block;
  counter-reset: hl-line;
  min-width: max-content;
  font: inherit;
}

.hl code > span[id^="L"]::before {
  counter-increment: hl-line;
  content: counter(hl-line);
  position: sticky;              /* номера стоят на месте при прокрутке вбок */
  left: 0;
  z-index: 1;
  display: inline-block;
  width: 5.25ch;
  padding: 0 1.25ch 0 0.9ch;
  text-align: right;
  background: var(--bg-secondary);  /* непрозрачный: код не должен просвечивать */
  color: var(--code-gutter);
  user-select: none;
  -webkit-user-select: none;
}

.hl pre::-webkit-scrollbar { height: 10px; }
.hl pre::-webkit-scrollbar-track { background: var(--bg-secondary); }
.hl pre::-webkit-scrollbar-thumb { background: var(--syntax-border); border-radius: 5px; }
.hl pre::-webkit-scrollbar-thumb:hover { background: var(--code-gutter); }

/* --- токены Pygments ------------------------------------------------------ */

.hl .c, .hl .ch, .hl .cm, .hl .c1, .hl .cs, .hl .sd {
  color: var(--syntax-comment);
  font-style: italic;
}
.hl .cp, .hl .cpf { color: var(--syntax-comment); }

.hl .k, .hl .kc, .hl .kd, .hl .kn, .hl .kp, .hl .kr { color: var(--syntax-keyword); }
.hl .o, .hl .ow { color: var(--syntax-keyword); }

.hl .kt { color: var(--syntax-type); }

.hl .s, .hl .sa, .hl .sb, .hl .sc, .hl .dl, .hl .s2, .hl .sh,
.hl .sx, .hl .s1, .hl .ss, .hl .si { color: var(--syntax-string); }
.hl .se, .hl .sr { color: var(--syntax-number); }

.hl .m, .hl .mb, .hl .mf, .hl .mh, .hl .mi, .hl .mo, .hl .il { color: var(--syntax-number); }

.hl .nf, .hl .fm, .hl .nd { color: var(--syntax-function); }
.hl .nc, .hl .ne { color: var(--syntax-function); }

.hl .nb, .hl .bp, .hl .no { color: var(--syntax-builtin); }

.hl .nv, .hl .vc, .hl .vg, .hl .vi, .hl .na { color: var(--syntax-variable); }
.hl .nt { color: var(--syntax-tag); }

.hl .n, .hl .nn, .hl .nx, .hl .nl, .hl .ni, .hl .p, .hl .w { color: var(--text-primary); }

.hl .err { color: var(--note-danger); }
.hl .gd  { color: var(--note-danger); }
.hl .gi  { color: var(--note-success); }
.hl .gh, .hl .gu { color: var(--accent); font-weight: 600; }
.hl .ge  { font-style: italic; }
.hl .gs  { font-weight: 600; }

@media (max-width: 600px) {
  .hl pre { font-size: 0.875rem; padding: 0.9rem 1rem 0.9rem 0; }
  .hl code > span[id^="L"]::before { width: 4.5ch; padding: 0 1ch 0 0.6ch; }
}