CR-2026-03-24: adoc Script UI Parity with Domus Antora

/* Remove border from inner pre - only .content has border */
.doc .listingblock .content pre {
  border: none !important;
  border-radius: 0 !important;
  padding-top: 2.5rem !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Container has the border */
.doc .listingblock .content {
  display: flex;
  flex-direction: column;
  border: 1px solid #0077b6;
  border-radius: 8px;
}

/* Language badge - cyan background, white text */
.doc .source-toolbox .source-lang {
  background: #0077b6;
  border-radius: 3px;
  padding: 0.25rem 0.5rem;
  color: #fff;
  font-family: Roboto, sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  pointer-events: auto;
}

/* Copy button - matching cyan */
.doc .source-toolbox .copy-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0077b6;
  border: none;
  border-radius: 3px;
  padding: 0.25rem 0.35rem;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
  pointer-events: auto;
}

/* Ensure pointer-events work for Tridactyl hints */
.doc .source-toolbox {
  pointer-events: auto;
  z-index: 10;
}

.doc .source-toolbox .copy-button {
  pointer-events: auto;
}

/* Badge: Dark grey (not cyan) to match Domus */
.doc .source-toolbox .source-lang {
  background: #333 !important;
  color: #cdd6f4 !important;
  border-radius: 4px;
  padding: 0.35rem 0.6rem;
}

/* Copy button: Cyan filled square with !important */
.doc .source-toolbox .copy-button {
  background: #0077b6 !important;
  padding: 0.35rem !important;
  border-radius: 4px;
}

// Theme cycling: dark → light → catppuccin → dark
var themes = ["dark", "light", "catppuccin"];
var icons = {dark: "🌙", light: "☀️", catppuccin: "🐱"};
var labels = {dark: "Dark", light: "Light", catppuccin: "Mocha"};

var current = localStorage.getItem("theme") || "dark";
document.documentElement.setAttribute("data-theme", current);

// Theme toggle button in bottom-right
var btn = document.createElement("button");
btn.id = "theme-toggle";
btn.onclick = function() {
  var idx = (themes.indexOf(current) + 1) % themes.length;
  current = themes[idx];
  document.documentElement.setAttribute("data-theme", current);
  localStorage.setItem("theme", current);
  btn.textContent = icons[current] + " " + labels[current];
};

// SVG icon embedded inline (no external dependency)
var svgIcon = '<svg viewBox="0 0 16 16" width="16" height="16">'
  + '<path fill="currentColor" d="M0 6.75C0 5.784..."/>'
  + '</svg>';

// execCommand fallback for file:// protocol
function copyToClipboard(text) {
  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard.writeText(text);
  } else {
    var ta = document.createElement("textarea");
    ta.value = text;
    document.body.appendChild(ta);
    ta.select();
    document.execCommand("copy");
    document.body.removeChild(ta);
  }
}