/* ekplabz code blocks: the boot-screen terminal frame, the COPY key and highlight.js colours.
   The frame is added by ekp-article.js; loaded on articles, fixed pages and glossary terms. */
:is(.single, .page, .blog) .post_content .ekp-code { margin: 1.6em 0; background: #070c1d; box-shadow: 0 0 0 1px #000; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
.ekp-code .bar { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: #9fb0d8; background: linear-gradient(#262b35, #1a1e26); border-bottom: 1px solid #000; }
.ekp-code .bar i { width: 8px; height: 8px; border-radius: 50%; }
.ekp-code .bar .lang { margin-left: auto; color: var(--lime); text-shadow: 0 0 6px var(--lime); }
.ekp-code .bar .lang small { font-size: 10px; color: #6f7a90; text-shadow: none; letter-spacing: .1em; }

/* COPY key: a small machined key in the title bar; its LED and the scan line use the unit colour (--acc) */
:is(.single, .page, .blog) .ekp-code { position: relative; transition: box-shadow .3s; }
.ekp-code .copy {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; padding: 3px 10px 3px 8px; cursor: pointer;
  font: 700 10.5px var(--mono); letter-spacing: .14em; color: #dfe6f3;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px), linear-gradient(#4e5566, #2a2f3a 55%, #1b1f28);
  border: 1px solid #0b0d12; border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 0 #000;
  transition: transform .06s, box-shadow .06s, color .2s;
}
.ekp-code .copy:hover { color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 0 #000, 0 0 8px -2px var(--acc, var(--cyan)); }
.ekp-code .copy:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 0 #000; }
.ekp-code .copy:focus-visible { outline: 2px solid var(--acc, var(--cyan)); outline-offset: 2px; }
.ekp-code .copy .led { width: 6px; height: 6px; border-radius: 50%; background: #3a4150; box-shadow: inset 0 0 0 1px #000; transition: background .15s, box-shadow .15s; }
.ekp-code .scan {
  position: absolute; left: 0; right: 0; top: 0; height: 40%; pointer-events: none; opacity: 0; z-index: 2;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--acc, var(--cyan)) 22%, transparent) 75%, var(--acc, var(--cyan)) 98%, transparent);
  mix-blend-mode: screen;
}
.ekp-code.copied { box-shadow: inset 0 0 0 1px var(--acc, var(--cyan)), inset 0 0 28px -8px var(--acc, var(--cyan)); } /* inset: the frame's clip-path would cut an outer glow */
.ekp-code.copied .copy { color: #0b1022; background: var(--acc, var(--cyan)); box-shadow: 0 0 12px var(--acc, var(--cyan)); }
.ekp-code.copied .copy .led { background: #fff; box-shadow: 0 0 6px #fff; }
.ekp-code.copied .scan { animation: ekp-scan .7s cubic-bezier(.3, .6, .4, 1) forwards; }
@keyframes ekp-scan {
  0% { opacity: 1; transform: translateY(-100%); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .ekp-code.copied .scan { animation: none; }
}
:is(.single, .page, .blog) .post_content .ekp-code pre { margin: 0; padding: 16px 18px; border: 0; border-radius: 0; background: none; overflow-x: auto; font-family: var(--mono); font-size: 13.5px; line-height: 1.75; color: #d6e2ff; }
:is(.single, .page, .blog) .post_content .ekp-code code { background: none; padding: 0; color: inherit; font: inherit; }
.hljs-comment, .hljs-quote { color: #6d7da8; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal { color: var(--magenta); }
.hljs-string, .hljs-regexp, .hljs-subst { color: var(--lime); }
.hljs-number, .hljs-symbol, .hljs-bullet { color: var(--amber); }
.hljs-title, .hljs-title.function_, .hljs-section { color: var(--cyan); }
.hljs-built_in, .hljs-type { color: var(--yellow); }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable, .hljs-params { color: #ffd2f4; }
.hljs-meta, .hljs-doctag { color: var(--violet); }

