/* code.css — language label + light syntax highlighting for code blocks.
 *
 * Put a language class on the <code>:  <code class="bash">  or  <code class="html">.
 * The language name is shown in the top-right corner of the box, and spans inside
 * the block carry local highlight classes:
 *   bash  →  .command (commands and &&) · .switch (-flags) · .path (paths and URLs)
 *   html  →  .tag (the whole tag) · .comment (comments) · inside a comment,
 *            .marker (sitehoster directive, param names, =, quotes, sub-labels) and
 *            .value (param values, note paths, triple-quoted content — what you edit)
 *
 * copy.js adds a "Copy" button to every <pre><code>; its styling is at the foot of this file.
 */

:root {
  --hl-command: #74e0a8;   /* bash: commands and && */
  --hl-switch:  #f0c66b;   /* bash: -flags / --switches */
  --hl-path:    #79c0ff;   /* bash: paths and URLs */
  --hl-tag:     #79c0ff;   /* html: the whole tag */
  --hl-comment: #cdd6e6;   /* html: comments — <!--, -->, the note text (the lighter grey) */
  --hl-marker:  #5fe0c0;   /* html: sitehoster directive, param names, = and quotes, sub-labels */
  --hl-value:   #f0c66b;   /* html: param values, note paths, triple-quoted content — the bits you edit */
  --hl-keyword: #c4b5fd;   /* js: const, let, return, function, if … */
  --hl-string:  #86efac;   /* js: string and template literals */
  --hl-fn:      #7dd3fc;   /* js: Reactive.* calls, method names */
  --hl-number:  #fca5a5;   /* js: numeric and boolean literals */
}

/* the box makes room for a small language tab pinned to its top-right corner */
pre > code.bash, pre > code.html, pre > code.js { display: block; padding-top: 14px; }
pre > code.bash::before, pre > code.html::before, pre > code.js::before {
  position: absolute; top: 0; right: 0;
  padding: 3px 10px;
  font-family: var(--font); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); background: rgba(255, 255, 255, 0.05);
  border-left: 1px solid var(--border); border-bottom: 1px solid var(--border);
  border-radius: 0 var(--radius-sm) 0 var(--radius-sm);
}
pre > code.bash::before { content: "bash"; }
pre > code.html::before { content: "html"; }
pre > code.js::before   { content: "javascript"; }

/* bash */
code.bash .command { color: var(--hl-command); }
code.bash .switch  { color: var(--hl-switch); }
code.bash .path    { color: var(--hl-path); }

/* html — inside a sitehoster comment, .marker (the structure) and .value (what you
   edit) sit inside .comment and override its colour token by token */
code.html .tag     { color: var(--hl-tag); }
code.html .comment { color: var(--hl-comment); }
code.html .marker  { color: var(--hl-marker); }
code.html .value   { color: var(--hl-value); }

/* javascript */
code.js .keyword { color: var(--hl-keyword); }
code.js .string  { color: var(--hl-string); }
code.js .fn      { color: var(--hl-fn); }
code.js .number  { color: var(--hl-number); }
code.js .comment { color: var(--hl-comment); }

/* plain content inside a code block — the generated-output marker, bash/tree text —
   takes the darker grey, so it sits beneath the now-lighter comment scaffolding.
   (Inline <code> in prose keeps its own --code-fg, unaffected.) */
pre code { color: var(--code-fg); font-weight: 700; }

/* a "plain" illustrative block (e.g. the homepage folder tree) reads lighter and
   carries no copy button — it is a picture, not a snippet to lift */
pre.plain code { color: var(--code-fg); }

/* a caption line directly under a code block (the muted <p> right after a <pre>)
   reads as a figure caption: centred and a touch smaller */
pre + p.muted { text-align: center; font-size: 0.9rem; }

/* ----------------------------------------------------------------------------
   Copy button — injected by copy.js into every <pre> that holds a <code>.
   A small secondary-style key that hovers in the bottom-right; on copy it slides
   up, turns green and reads "Copied" briefly.
   ---------------------------------------------------------------------------- */
pre { position: relative; }
.code-copy {
  position: absolute; right: 12px; bottom: 12px;
  min-width: 5.4em;                       /* fits "Copied" even while it reads "Copy" */
  padding: 3px 10px; font-size: 0.72rem; font-weight: 650; line-height: 1.4;
  color: var(--fg); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  cursor: pointer; opacity: 0; transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.18s ease,
              color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
pre:hover .code-copy, .code-copy:focus-visible { opacity: 1; transform: translateY(0); }
.code-copy:hover { color: var(--heading); filter: brightness(1.12); }
.code-copy.copied {
  opacity: 1; transform: translateY(-4px);
  color: var(--accent-fg); background: var(--ok-fg); border-color: var(--ok-bd);
}