/* =============================================================
   syntax.css — Prism.js theme authored against the causl-org
   pair tokens from #1268. Drop-in companion for the vendored
   Prism build under /vendor/prismjs/. Token mappings follow the
   Prism convention so any Prism language grammar (js/ts/jsx/tsx/
   bash/rust/json/markup/css) renders coherently.

   All colours come from the pair-token system so light + dark
   themes both stay legible. Code-block surfaces use
   --surface-elevated (LIGHT GRAY in light mode, like the rest of
   the Getting Started surfaces); foreground text uses
   --text-on-elevated. Brand accent tokens (--causl-commit-green,
   etc.) re-target themselves automatically in light mode
   (site.css #1268).
   ============================================================= */

/* -------------------------------------------------------------
   Plain-source codeblock (#1295)
   -------------------------------------------------------------
   The static HTML payload is the BARE MINIMUM:

       <code class="codeblock-source" data-lang="X">RAW SOURCE</code>

   At runtime, causl-org/js/codeblock.js wraps the source in:

       <code class="codeblock-source" data-lang="X" data-codeblock-mounted="true">
         <span class="codeblock-gutter" aria-hidden="true">
           <span class="codeblock-gutter-line">1</span>...
         </span>
         <span class="codeblock-text">RAW SOURCE (with token spans)</span>
         <button class="codeblock-btn codeblock-copy">...</button>
       </code>

   The pair-token system (#1268) flips --surface-elevated and
   --text-on-elevated automatically in light mode via site.css, so a
   single selector contract serves both themes by inheritance. No
   !important — the runtime contrast audit corrects any cascade
   losers by writing inline `color` styles where needed (#1295). */

.codeblock-source {
  /* Two-column grid: gutter (auto) + text (1fr). The copy button
     escapes the grid via position: absolute. */
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto;
  gap: 0 0.9rem;

  /* Pre-formatted: preserve newlines + indentation. */
  white-space: pre;
  text-align: left;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;

  /* Pair-token contract: bg + foreground flip together via site.css
     theme blocks. In light mode --surface-elevated resolves to
     #F4F6F9 (light gray, same as Getting Started cards). */
  background: var(--surface-elevated);
  color: var(--text-on-elevated);
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.6;

  border-radius: 8px;
  padding: var(--space-4) var(--space-5) var(--space-4) 0.6rem;
  margin: var(--space-4) 0;

  position: relative;
  overflow-x: auto;
}

/* Before the JS mounts, the <code> still has its raw source as the
   only child — no grid children to align. Fall back to a single
   column so the source still renders correctly (e.g. for no-JS
   users or during the brief pre-mount paint). */
.codeblock-source:not([data-codeblock-mounted="true"]) {
  display: block;
  padding-left: var(--space-5);
}

.codeblock-gutter {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0 0.4rem 0 0.1rem;
  border-right: 1px solid rgba(143, 162, 170, 0.18);
  color: var(--text-on-elevated-subtle);
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.6;
  /* Numbers must not appear in copy/paste selections. */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

.codeblock-gutter-line {
  display: block;
  text-align: right;
  min-width: 1.4em;
  /* Match the leading of the highlighted code so numbers line up
     with their corresponding source line, even across font fallbacks. */
  line-height: inherit;
}

.codeblock-text {
  display: block;
  white-space: pre;
  overflow-x: auto;
  /* Inherit the colour contract from .codeblock-source so token
     spans without an explicit colour fall back to the pair-token
     foreground. */
  background: transparent;
  color: inherit;
  min-width: 0;
}

/* Inline code inside running prose: just the mono font, no pill.
   The background+padding "pill" treatment was removed for #1280 —
   inline code now reads as part of the sentence and inherits the
   surrounding paragraph color via --text-on-elevated.

   We explicitly scope this to <code> that is NOT itself a
   .codeblock-source, so the inline reset can't fight the block-
   level surface contract on the new flat <code> root (#1295). */
code:not(.codeblock-source),
:not(pre) > code[class*="language-"] {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: 0.92em;
  white-space: normal;
}

/* ---------- Copy button ---------- */

.codeblock-btn {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(143, 162, 170, 0.28);
  border-radius: 6px;
  background: var(--surface-overlay);
  color: var(--text-on-elevated-muted);
  cursor: pointer;
  /* Stack the SVG above the tooltip span. */
  font: inherit;
  line-height: 0;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.codeblock-btn:hover,
.codeblock-btn:focus-visible {
  background: var(--surface-overlay);
  color: var(--text-on-overlay, var(--text-on-elevated));
  border-color: rgba(143, 162, 170, 0.45);
  outline: none;
}

.codeblock-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--causl-async-cyan);
}

.codeblock-btn.is-success {
  color: var(--causl-commit-green);
  border-color: var(--causl-commit-green);
}

/* Copy sits flush bottom-right. The legacy .codeblock-run /
   .codeblock-terminal rules were removed in #1292 — the editable
   playground is now a separate component (.playground-wrapper) with
   its own styles in playground.css, so read-only blocks no longer
   host a Run button or slide-out terminal. */
.codeblock-copy { right: 0.5rem; }

/* Tooltip: hidden by default, fades in on hover / focus. */
.codeblock-btn-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: var(--surface-overlay);
  color: var(--text-on-overlay, var(--text-on-elevated));
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.codeblock-btn:hover .codeblock-btn-tooltip,
.codeblock-btn:focus-visible .codeblock-btn-tooltip,
.codeblock-btn.is-success .codeblock-btn-tooltip {
  opacity: 1;
}

/* Hidden iframe — the sandbox is never visible; it only exists to
   evaluate user code and post messages back. Shared by the editable
   .playground-wrapper component (causl-org/js/sandbox-runner.js). */
iframe.codeblock-sandbox {
  display: none !important;
}

/* ---------- Token palette ---------- */

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--text-on-elevated-subtle);
  font-style: italic;
}

.token.punctuation {
  color: var(--text-on-elevated-muted);
}

.token.namespace {
  opacity: 0.7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: var(--causl-commit-green);
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: var(--causl-conflict-amber);
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: var(--text-on-elevated-muted);
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: var(--causl-async-cyan);
  font-weight: 600;
}

.token.function,
.token.class-name {
  color: var(--causl-mutation-violet);
}

.token.regex,
.token.important,
.token.variable {
  color: var(--causl-conflict-amber);
}

.token.important,
.token.bold {
  font-weight: 700;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}