/* 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 (localhoster 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: localhoster directive, param names, = and quotes, sub-labels */
  --hl-value:   #f0c66b;   /* html: param values, note paths, triple-quoted content — the bits you edit */
}

/* the box makes room for a small language tab pinned to its top-right corner */
pre:has(> code.bash), pre:has(> code.html) { position: relative; padding-top: 30px; }
pre:has(> code.bash)::before, pre:has(> code.html)::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:has(> code.bash)::before { content: "bash"; }
pre:has(> code.html)::before { content: "html"; }

/* 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 localhoster 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); }

/* 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: #7f8a9e; }

/* 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); }

/* ----------------------------------------------------------------------------
   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:has(> code) { 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(--tex-brushed), var(--metal-soft);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); box-shadow: var(--bevel-up);
  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);
  text-shadow: none;
}