/**
 * Kopiowanie kodu do schowka - style do js/v2/code-copy.js.
 *
 * Osobny arkusz, a nie base.css: ładują go oba nagłówki (head-v2.php
 * i starszy head.php, którym jadą m.in. polityka prywatności i stare
 * lekcje), a tam base.css nie ma. Stąd zapasowe wartości w `var()` -
 * pierwsza nazwa jest z palety V2, druga z tokens.css/bridge.css.
 */
/* Klasa `cm-codecopy` na <html> stawia skrypt, gdy jest schowek i strona nie
   jest panelem /mgmt - bez niej ikony przy `<code>` nie ma wcale, bo klik
   w nią niczego by nie zrobił.

   `<pre>`: prawdziwy przycisk w opakowaniu, jak `.l-pre` w lekcji blokowej
   (kurs-lekcja.css opisuje, czemu opakowanie). Otoczka w kolorze tła bloku
   zasłania kod przewijany pod przyciskiem; kolor podaje skrypt. */
.cm-pre{position:relative}
.cm-copy{
  position:absolute;top:6px;right:6px;
  display:grid;place-items:center;width:28px;height:28px;padding:0;cursor:pointer;
  border-radius:8px;border:1px solid var(--hair,var(--border-1));
  background:var(--card,var(--surface));color:var(--sub,var(--fg-3));
  box-shadow:0 0 0 5px var(--cm-pre-bg,transparent);
}
.cm-copy:hover{color:var(--ink,var(--fg-1));background:var(--pill,var(--surface-2))}
.cm-copy:focus-visible{border-radius:8px}
.cm-copy svg{width:15px;height:15px}
.cm-copy.is-ok,.cm-copy.is-ok:hover{
  color:var(--ok,#16794C);border-color:var(--ok,#16794C);background:color-mix(in srgb,var(--ok,#16794C) 12%,var(--card,var(--surface)));
}
.cm-copy [data-copy-done],.cm-copy.is-ok [data-copy-icon]{display:none}
.cm-copy.is-ok [data-copy-done]{display:block}

/* Inline `<code>`: ikona to pseudo-element, nie przycisk w DOM - skrypt
   tłumaczy, czemu (treść lekcji zapisuje się z `innerHTML`). Stoi w potoku
   tekstu, a nie `position:absolute`, więc zajmuje własne miejsce i nie
   trzeba dokładać `padding-right`, który arkusze stron i tak by przebiły.
   Szerokość ikony z odstępem i paddingiem `<code>` musi się mieścić
   w `STREFA_IKONY` skryptu. */
.cm-codecopy code:not(pre code)::after{
  content:"";display:inline-block;width:.8em;height:.8em;margin-left:.35em;
  vertical-align:text-top;cursor:pointer;opacity:.45;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cm-codecopy code:not(pre code):hover::after{opacity:.8}
.cm-codecopy [contenteditable] code::after,
.cm-codecopy [data-no-copy] code::after,
.cm-codecopy code[data-no-copy]::after{content:none}
@media print{.cm-codecopy code::after,.cm-copy{display:none}}

/* Potwierdzenie dla inline `<code>` - jeden dymek pod <body>, przyklejony
   do prawego górnego rogu skopiowanego elementu. */
.cm-code-ok{
  position:fixed;z-index:1000;transform:translate(-100%,calc(-100% - 6px));
  display:flex;align-items:center;gap:5px;padding:4px 9px;border-radius:8px;
  background:var(--ink,var(--fg-1));color:var(--bg,var(--canvas));font-size:12px;font-weight:700;
  pointer-events:none;opacity:0;transition:opacity .15s ease-out;
}
.cm-code-ok.is-on{opacity:1}
.cm-code-ok svg{width:13px;height:13px}