/* ==========================================================================
   Prism syntax theme — "dusk". Matches palette-dusk.css.
   Loaded after prism-laserwave.css so it overrides it. Live on production.

   LaserWave was chosen for the old violet theme and clashes with dusk: its
   ground is #27212e grey-purple and it leans cyan/yellow. This maps the same
   token classes onto the site palette instead.

   The code ground is translucent (see below), so its effective colour varies
   with what is behind it. Every token still clears 4.5:1 at the WORST point —
   directly over the sun glow — including comments, which most syntax themes
   let fail. Ratios below are measured there; off the sun they are higher:

     base       #EDE7FF  14.11      comment   #8E80BE   4.83
     variable   #FFD166  11.76      keyword   #E8459B   4.65
     builtin    #FFB3D9  10.26      string    #3DD6D0   9.47
     function   #FF9ECF   8.92      number    #FF8C42   7.33
     operator   #B8A8E0   7.85      punct     #A093CC   6.09

   All eight code blocks on this site are PowerShell, so the mapping is
   tuned for it: variables carry gold because PowerShell is variable-dense,
   keywords take the accent magenta, strings the cool teal.
   ========================================================================== */

code[class*="language-"],
pre[class*="language-"] {
  color: #EDE7FF;
  text-shadow: none;
}

/* --------------------------------------------------------------------------
   THE TRANSLUCENT WELL.

   rgba(14, 10, 34, 0.78) — 22% of the page shows through, so the star field
   and the sun glow read faintly behind the code instead of being punched out
   by an opaque panel.

   The base is DARKER than the #1C1640 it replaces, and that is what pays for
   the translucency. Letting a brighter ground bleed in raises the effective
   ground colour and eats contrast; #E8459B (keyword) sat at just 4.65:1 on
   the old solid ground, so there was no headroom to give away. Dropping the
   base to #0E0A22 buys back exactly what the bleed-through costs: over the
   brightest point of the sun the worst token measures 4.63:1, within 0.02 of
   where it was, and everywhere else it is better. Raise the alpha toward 1.0
   or lighten the base and the magenta fails WCAG AA over the sun.

   ONE LAYER ONLY. Three separate rules used to paint this background — the
   vendor sheet's bare `pre`, and Prism's `pre[class*=language-]` and
   `code[class*=language-]`. With a solid colour, stacking them was invisible.
   With alpha they composite: two layers at 0.78 give 95% opacity, i.e. barely
   translucent at all. So the tint goes on `pre` and everything inside it is
   forced transparent.

   Both selectors are needed: Ghost emits `<pre class="language-x">` for a
   fenced block with a language, but a plain fenced block comes out as a bare
   `<pre>` whose background comes from the vendor `pre` rule instead.
   -------------------------------------------------------------------------- */
.post-content pre,
pre[class*="language-"] {
  background: rgba(14, 10, 34, 0.78);
}

.post-content pre code,
pre[class*="language-"] > code,
code[class*="language-"] {
  background: transparent;
}

/* --------------------------------------------------------------------------
   THE EDGE — warm hairline, soft corner.

   The border was #3A2D6E, a dark violet barely separable from the ground, so
   the block read as a hard-edged slab rather than an object with an edge.
   It is now a translucent amber: rgba(255, 169, 77, 0.50) sits between the
   palette's sun gold #FFD166 and its orange #FF8C42, and being translucent it
   takes a little of whatever is behind the block, exactly as the fill does.
   Over the usual dark ground it resolves to roughly #875B3A — a warm hairline,
   not a neon outline. Raise the alpha if it wants more presence.

   `border-radius: 10px`, a little past the vendor `pre`'s 8px, so the change
   is actually visible. Both selectors again, because a fenced block without a
   language comes out as a bare `<pre>` that the Prism selector never matches.

   Nothing inside paints a background any more (see above), so there is no
   square inner layer to poke through the rounded corners.
   -------------------------------------------------------------------------- */
.post-content pre,
pre[class*="language-"] {
  border: 1px solid rgba(255, 169, 77, 0.50);
  border-radius: 10px;
}

code[class*="language-"]::selection,
code[class*="language-"] ::selection,
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection {
  background: rgba(232, 69, 155, 0.28);
  color: inherit;
}

.token.comment,
.token.prolog,
.token.cdata          { color: #8E80BE; font-style: italic; }

.token.punctuation    { color: #A093CC; }

.token.doctype,
.token.operator,
.token.entity,
.token.url,
.token.inserted       { color: #B8A8E0; }

.token.important,
.token.atrule,
.token.property,
.token.keyword,
.token.tag            { color: #E8459B; }

.token.attr-name,
.token.function,
.token.class-name,
.token.deleted,
.token.selector       { color: #FF9ECF; }

.token.attr-value,
.token.regex,
.token.char,
.token.string         { color: #3DD6D0; }

.token.variable,
.token.symbol,
.token.namespace      { color: #FFD166; }

.token.number         { color: #FF8C42; }

.token.builtin,
.token.constant,
.token.boolean        { color: #FFB3D9; }

.token.bold           { font-weight: 700; }
.token.italic         { font-style: italic; }

/* --------------------------------------------------------------------------
   COPY BUTTON.

   Hidden until the block is hovered, so it costs nothing at rest. It is
   positioned against the <pre>, which needs a positioning context — the
   vendor sheet does not give it one.

   Horizontal scroll is not a concern here: the vendor Prism rule sets
   `white-space: pre-wrap` on code blocks, so long lines wrap instead of
   scrolling, and an absolutely positioned child cannot drift out of view.

   It also appears on keyboard focus (`:focus-within`, plus `:focus-visible`
   on the button itself). Without that the control would be reachable by Tab
   but invisible while focused, which is worse than not having it.

   On touch there is no hover at all, so it is shown permanently there rather
   than being unreachable.
   -------------------------------------------------------------------------- */
.post-content pre {
  position: relative;
}

.code-copy {
  position: absolute;
  top: 7px;
  right: 8px;
  padding: 2px 7px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: #A093CC;
  background: rgba(14, 10, 34, 0.92);
  border: 1px solid rgba(255, 169, 77, 0.45);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.post-content pre:hover .code-copy,
.post-content pre:focus-within .code-copy {
  opacity: 1;
}

.code-copy:hover {
  color: #FFD166;
  border-color: rgba(255, 169, 77, 0.85);
}

.code-copy:focus-visible {
  opacity: 1;
  outline: 2px solid #FFD166;
  outline-offset: 2px;
}

.code-copy.is-done {
  color: #3DD6D0;                        /* planet teal — the palette's "yes" */
  border-color: rgba(61, 214, 208, 0.65);
}

.code-copy.is-failed {
  color: #FF8C42;                        /* orange — the palette's "no" */
  border-color: rgba(255, 140, 66, 0.65);
}

@media (hover: none) {
  .code-copy { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .code-copy { transition: none; }
}