/* ==========================================================================
   Code presentation.

   Priorities, in order: legibility, safe overflow, then aesthetics. Code is
   never allowed to widen the page — every block scrolls itself.
   ========================================================================== */

/* --- Inline code -------------------------------------------------------- */
.prose :not(pre) > code {
  font-family: var(--font-mono);
  font-size: .875em;
  padding: .15em .4em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  /* Registry keys, UNC paths and long flags must wrap rather than overflow. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.prose a > code { color: var(--accent); }

/* --- Block container ---------------------------------------------------- */
/* theme.js wraps each <pre> in .code-block and adds the header. Styles are
   written so an unwrapped <pre> (JS disabled) still looks correct. */
.code-block {
  margin-block: var(--space-5);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.code-block__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: .4rem .5rem .4rem .85rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.code-block__lang {
  font-family: var(--font-mono); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-dim);
}

.code-copy {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .55rem;
  font-family: var(--font-mono); font-size: .72rem;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.code-copy:hover { color: var(--text); border-color: var(--border-strong); }
.code-copy[data-copied="true"] { color: #3FB950; border-color: #3FB950; }

.prose pre {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: transparent;
  font-family: var(--font-mono);
  font-size: .875rem;
  line-height: 1.6;
  tab-size: 4;
}
/* A bare <pre> outside .code-block still needs its own frame. */
.prose > pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-block: var(--space-5);
}
.prose pre code {
  display: block;
  padding: 0; background: none; border: 0;
  font-size: inherit; color: var(--text);
  /* Never wrap inside a code block — scroll instead, so alignment survives. */
  white-space: pre;
  overflow-wrap: normal;
  min-width: 0;
}

/* Scrollbars sized so they do not dominate small blocks. */
.prose pre::-webkit-scrollbar { height: 10px; }
.prose pre::-webkit-scrollbar-track { background: transparent; }
.prose pre::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 999px;
  border: 3px solid var(--surface-2);
}
.prose pre { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

/* --- Shell sessions -----------------------------------------------------
   Prism's shell-session grammar separates the typed command from the output.
   Output is dimmed so the command stands out — no vendor assumptions, and no
   requirement that the prompt be `$`. PowerShell (PS C:\>), CMD (C:\>) and
   POSIX shells (#, $) all read the same way.                                */
.token.command { color: var(--text); }
.token.output  { color: var(--text-muted); }
.language-shell-session .token.shell-symbol,
.token.shell-symbol { color: var(--accent); user-select: none; }
.language-shell-session .token.info { color: var(--code-fn); }

/* --- Syntax tokens ------------------------------------------------------ */
:root, [data-scheme="dark"] {
  --code-comment: #6C7789;
  --code-keyword: #A78BFA;
  --code-string:  #9ECE6A;
  --code-fn:      #7AA2F7;
  --code-number:  #E0A072;
  --code-class:   #E0AF68;
  --code-var:     #E8879B;
  --code-punct:   #8B94A6;
}
[data-scheme="light"] {
  --code-comment: #6B7280;
  --code-keyword: #7C3AED;
  --code-string:  #15803D;
  --code-fn:      #1D4ED8;
  --code-number:  #B45309;
  --code-class:   #A16207;
  --code-var:     #BE123C;
  --code-punct:   #64748B;
}

.token.comment, .token.prolog, .token.cdata, .token.doctype {
  color: var(--code-comment); font-style: italic;
}
.token.punctuation { color: var(--code-punct); }
.token.property, .token.tag, .token.constant, .token.symbol, .token.boolean {
  color: var(--code-var);
}
.token.number { color: var(--code-number); }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
  color: var(--code-string);
}
.token.operator, .token.entity, .token.url, .token.variable {
  color: var(--code-var);
}
.token.atrule, .token.attr-value, .token.keyword {
  color: var(--code-keyword);
}
.token.function, .token.class-name { color: var(--code-fn); }
.token.class-name { color: var(--code-class); }
.token.regex, .token.important { color: var(--code-number); }
.token.deleted { color: #F85149; }
.token.important, .token.bold { font-weight: 600; }
.token.italic { font-style: italic; }
.token.namespace { opacity: .75; }

/* Keep highlighting legible for anyone who forces high contrast. */
@media (forced-colors: active) {
  .token { color: CanvasText !important; }
  .code-block, .prose pre { border-color: CanvasText; }
}

@media (max-width: 760px) {
  .prose pre { font-size: .8rem; padding: var(--space-3) var(--space-4); }
  .code-block__head { padding-left: var(--space-4); }
}

@media print {
  .code-copy { display: none; }
  .prose pre { white-space: pre-wrap; overflow-wrap: anywhere; }
}