/* Листинг кода: рамка 1px тушью, сверху 2px, JetBrains Mono 15/1.6, комментарии курсивом графитом, без цвета.
   Над блоком справа — подпись «Листинг N · язык» и тихая «Копировать» (добавляет /js/main.js; без скрипта
   кнопки нет). Код шире блока прокручивается, у правого края растушёвка, пока есть что докрутить (.is-cut).
   <figure class="listing" data-n="1"><figcaption class="listing__cap">Листинг 1 <span class="listing__lang">php</span></figcaption><pre><code>…</code></pre></figure> */

.listing { --pre-bg: var(--paper); position: relative; margin: 0; }

.listing__cap {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0 6px;
  padding: 0 0 6px;
  font-size: var(--fs-label); color: var(--graphite);
  font-variant-numeric: tabular-nums;
}
.listing__lang { font-style: italic; }
.listing__lang::before { content: "· "; font-style: normal; }
.listing__status { flex-basis: 100%; text-align: right; font-style: italic; color: var(--graphite); }
.listing__status:empty { display: none; }

.listing pre {
  margin: 0; padding: 14px 16px 16px;
  background: var(--pre-bg);
  border: 1px solid var(--ink); border-top-width: 2px;
  overflow-x: auto; scrollbar-width: thin;
  font: 400 var(--fs-label)/1.6 var(--mono); letter-spacing: -.02em;
  tab-size: 4;
}
.listing pre:focus-visible { outline-offset: 2px; }
.listing code { font: inherit; letter-spacing: inherit; }
/* комментарии — курсивом графитом (разметка <i> или .c) */
.listing code :is(i, .c) { font-style: italic; color: var(--graphite); }

/* растушёвка у правого края, пока код прокручивается */
.listing::after {
  content: ""; position: absolute; right: 1px; bottom: 1px; height: calc(100% - var(--cap-h, 34px));
  width: 40px;
  background: linear-gradient(to right, rgb(251 252 253 / 0), var(--pre-bg));
  opacity: 0; transition: opacity .2s;
  pointer-events: none;
}
.listing.is-cut::after { opacity: 1; }

/* «Копировать» — тихая кнопка в подписи */
.copy {
  min-height: 28px; margin-left: 12px; padding: 6px 0 2px;
  background: none; border: 0; border-bottom: 1px solid var(--graphite);
  font: 600 var(--fs-label)/1 var(--sans); color: var(--ink);
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.copy:hover, .copy:focus-visible { color: var(--blue); border-color: currentColor; }
.copy.is-done { color: var(--graphite); border-color: transparent; }