/* =============================================================================
   @elements/style — code

   Inline <code> gets a minimal panel background + mono font. Block <pre> is
   intentionally LEFT UNDECORATED by default — apply .code-block to get the
   full styled treatment. This avoids the old issue where pre defaults
   leaked into custom CLI layouts and created double-border artifacts.

   For a styled CLI bar with a prompt + copy button, use .terminal
   (see terminal.css).
============================================================================= */

code {
  font-family: var(--font-code);
  font-size: 0.875em;
  background: var(--bg-panel);
  color: var(--ink);
  padding: 0.0625rem 0.3125rem;
  border-radius: var(--radius-xs);
}

/* Bare <pre> keeps only font. No background, no border, no padding, no
   radius. Apply .code-block for a decorated block. */
pre {
  font-family: var(--font-code);
  font-size: var(--text-sm);
  line-height: 1.6;
  overflow-x: auto;
  color: inherit;
  background: transparent;
}

/* Decorated code block — opt in with .code-block on the <pre>. */
.code-block {
  background: var(--term-bg);
  color: var(--term-ink);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  border: 1px solid transparent;
}

.code-block code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
  border-radius: 0;
}

/* Light variant — use on article pages where a terminal block would be too heavy */
.code-block-light {
  background: var(--bg-panel);
  color: var(--ink);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  border: 1px solid var(--rule);
}

/* Inline path reference — file paths in prose.
   Use: <span class="path">app/pages/home/index.html</span>
   Distinct from <code> (literal code) and .cli-ref (runnable command). */
.path {
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--accent-deep);
  background: var(--bg-panel);
  padding: 0.125rem 0.4375rem;
  border-radius: var(--radius-xs);
}

/* Inline CLI command reference — for prose mentions of a runnable command.
   Use: <span class="cli-ref"><span class="cli-ref-prompt">&gt;</span>
        <span class="cli-ref-cmd">elements purchase</span></span> */
.cli-ref {
  font-family: var(--font-mono);
  font-size: 0.875em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  background: var(--bg-panel);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-xs);
}
.cli-ref-prompt { color: var(--ink-dim); }
.cli-ref-cmd    { color: var(--accent-deep); font-weight: var(--font-medium); }