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

   Bare <code> auto-styles. Bare <pre> stays undecorated (so it doesn't
   leak into custom CLI layouts); apply `.is-block` to a <pre> for a styled
   block. The dark variant uses the terminal palette.

     <code>let x = 1</code>                 — inline, default panel bg
     <pre class="is-block">…</pre>             — dark terminal block
     <pre class="is-block is-light">…</pre>       — light variant

   Inline path / cli refs in prose:

     <span class="path">app/pages/home/index.html</span>
     <span class="cli"><span class="prompt">&gt;</span><span class="cmd">elements purchase</span></span>
============================================================================= */

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

pre {
  font-family: var(--font-code);
  font-size: var(--text-sm);
  line-height: 1.6;
  overflow-x: auto;
  color: inherit;
  background: transparent;
}

pre.is-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;
}
pre.is-block code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
  border-radius: 0;
}

pre.is-block.is-light {
  background: var(--bg-panel);
  color: var(--ink);
  border: 1px solid var(--rule);
}

/* Inline path reference — file paths in prose. */
.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 — prose mentions of a runnable command. */
.cli {
  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);
}
:where(.cli > .prompt) { color: var(--ink-dim); }
:where(.cli > .cmd)    { color: var(--accent-deep); font-weight: var(--font-medium); }