/* Code panels and syntax colours, shared by the static guides (via polish.css)
   and the Next pages (app/layout.tsx). public/guides/vendor/hl.js highlights a
   <pre><code> and wraps it as .code with a header (language + Copy). Uses the
   page's --paper / --ink / --line / --mono, which both kinds of page define. */
/* ---------- code panels ----------
   hl.js wraps every highlighted block as .code: a header strip (language dot +
   name, Copy button) over the code. The panel sits on the page's own paper in
   the light theme and on deep ink in the dark one, each with its own syntax
   palette; --lc is the language's colour, used only for the dot and a hairline. */
.code{--code-bg:color-mix(in srgb,var(--ink) 4%,var(--paper));--code-ink:#2B2620;--code-dim:#8A8170;--code-line:color-mix(in srgb,var(--ink) 11%,transparent);
  --k:#B4380F;--s:#2F7A2F;--n:#8A3FB8;--f:#9A5B00;--t:#A1470E;--a:#11708C;--g:#1E7A47;--c:#968C7A;
  position:relative;margin:16px 0;max-width:min(100%,900px);border:1px solid var(--code-line);border-radius:14px;overflow:hidden;
  background:var(--code-bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--shadow-sm)}
.code::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--lc,#8F877B),transparent 70%);opacity:.75}
.code-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 14px;border-bottom:1px dashed var(--code-line)}
.code-l{display:inline-flex;align-items:center;gap:8px;font:700 .68rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--code-dim)}
.code-l i{width:9px;height:9px;border-radius:3px;background:var(--lc,#8F877B);box-shadow:0 0 0 3px color-mix(in srgb,var(--lc,#8F877B) 22%,transparent)}
.code-copy{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--code-line);background:transparent;color:var(--code-dim);
  font:600 .68rem/1 var(--mono);letter-spacing:.04em;padding:6px 10px;border-radius:999px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.code-copy:hover{color:var(--code-ink);border-color:color-mix(in srgb,var(--code-ink) 35%,transparent)}
.code-copy.ok{color:var(--g);border-color:color-mix(in srgb,var(--g) 50%,transparent)}
.code pre,.ans .code pre{margin:0;padding:12px 16px 14px;background:none;border:0;border-radius:0;box-shadow:none;color:var(--code-ink);
  overflow-x:auto;font-size:.84rem;line-height:1.65;tab-size:4}
.code pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
/* not highlighted (no hl.js on the page yet): still a calm panel */
.ans pre:not(.code pre){background:color-mix(in srgb,var(--ink) 4%,var(--paper));color:var(--ink);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;overflow-x:auto;font-size:.84rem;line-height:1.6;margin:14px 0;max-width:min(100%,900px)}
.ans pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}

/* language colours (dot + top hairline) */
.code[data-lang="python"]{--lc:#3776AB}
.code[data-lang="javascript"],.code[data-lang="js"]{--lc:#D9B300}
.code[data-lang="jsx"],.code[data-lang="tsx"]{--lc:#17A2C8}
.code[data-lang="typescript"]{--lc:#3178C6}
.code[data-lang="cpp"],.code[data-lang="c"]{--lc:#00599C}
.code[data-lang="java"]{--lc:#E76F00}
.code[data-lang="bash"],.code[data-lang="shell"]{--lc:#2E9E5B}
.code[data-lang="sql"]{--lc:#D97706}
.code[data-lang="json"]{--lc:#6B8E23}
.code[data-lang="yaml"],.code[data-lang="ini"]{--lc:#C2410C}
.code[data-lang="dockerfile"]{--lc:#1D63ED}
.code[data-lang="css"]{--lc:#7C3AED}
.code[data-lang="xml"],.code[data-lang="html"]{--lc:#E34C26}
.code[data-label="mongosh"]{--lc:#13AA52}
.code[data-label="redis-cli"]{--lc:#DC382D}
.code[data-label="aws"]{--lc:#FF9900}
.code[data-lang="http"]{--lc:#0F766E}

/* syntax: one set of roles, two palettes */
.hljs{display:block;background:transparent;color:inherit}
.hljs-comment,.hljs-quote{color:var(--c);font-style:italic}
.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-doctag,.hljs-meta .hljs-keyword{color:var(--k)}
.hljs-meta{color:var(--a)}
.hljs-string,.hljs-regexp,.hljs-addition,.hljs-meta .hljs-string{color:var(--s)}
.hljs-number,.hljs-symbol{color:var(--n)}
.hljs-title,.hljs-title.function_,.hljs-section{color:var(--f)}
.hljs-title.class_,.hljs-type,.hljs-built_in{color:var(--t)}
.hljs-attr,.hljs-attribute,.hljs-property,.hljs-variable.language_,.hljs-selector-class,.hljs-selector-id{color:var(--a)}
.hljs-name,.hljs-tag{color:var(--g)}
.hljs-variable,.hljs-template-variable,.hljs-params,.hljs-subst{color:inherit}
.hljs-bullet,.hljs-link{color:var(--f)}
.hljs-deletion{color:var(--k)}
.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}

/* dark theme: deep ink panel, brighter palette */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .code{--code-bg:#100F0B;--code-ink:#EDE6D6;--code-dim:#8F877B;--code-line:rgba(255,255,255,.08);
  --k:#FF9E64;--s:#A8D883;--n:#D3A8F5;--f:#FFD479;--t:#FFC27A;--a:#7FC4E8;--g:#8FD694;--c:#7D766A;box-shadow:var(--shadow-sm)}
  :root:not([data-theme="light"]) .ans pre:not(.code pre){background:#100F0B}}
:root[data-theme="dark"] .code{--code-bg:#100F0B;--code-ink:#EDE6D6;--code-dim:#8F877B;--code-line:rgba(255,255,255,.08);
  --k:#FF9E64;--s:#A8D883;--n:#D3A8F5;--f:#FFD479;--t:#FFC27A;--a:#7FC4E8;--g:#8FD694;--c:#7D766A;box-shadow:var(--shadow-sm)}
:root[data-theme="dark"] .ans pre:not(.code pre){background:#100F0B}

/* phones: wrap long lines instead of hiding them past the edge (indentation is kept) */
@media (max-width:600px){.code pre,.ans pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.78rem;padding-left:12px;padding-right:12px}
  .code-h{padding-left:12px}}