/* CODE DISPLAY SYSTEM
 *
 * THREE MUTUALLY EXCLUSIVE SYNTAX HIGHLIGHTING MODES:
 *
 * 1. PRISM (default, no class):
 *    - Prism.js applies full language-specific syntax highlighting
 *    - Tokens colored with our custom color palette per language
 *    - Use case: Regular code examples
 *
 * 2. SUBTLE (code-snippet.subtle):
 *    - All tokens muted to 50% white opacity
 *    - <mark> tags colored with vibrant language-specific colors
 *    - Use case: Pedagogical highlighting - draw attention to specific parts
 *
 * 3. NONE (code-snippet.none):
 *    - No Prism.js syntax highlighting applied
 *    - Plain white monospace text
 *    - Use case: Terminal output, plain text, when color distracts
 *
 * Architecture:
 * - Prism.js tokenizes and adds .token classes
 * - We control token colors via CSS custom properties per language
 * - Language detection via data-language attribute
 * - Copy-paste restrictions via pedagogical choice
 *
 * Tokens are defined in code-tokens.css
 */


/* =============================================================================
   BASE CODE EDITOR
   ============================================================================= */

code-snippet {
	position: relative;
	display: block;
	background: var(--code-background);
	border-radius: var(--code-border-radius);
	overflow: hidden;
	min-width: 0;
}

code-snippet + code-snippet {
	margin-top: 1rem;
}

code-snippet code {
	opacity: 0;
	transition: opacity 0.2s ease;
}

code-snippet code.highlighted {
	opacity: 1;
}

/* Size variants */
code-snippet[data-code-size="large"]     { --code-font-size: var(--code-font-size-large); }
code-snippet[data-code-size="condensed"] { --code-font-size: var(--code-font-size-small); }

/* Pacman needs room to roam */
code-snippet.has-pacman code {
	padding-block: calc(var(--code-padding) * 2);
}

code-snippet pre {
	display: block;
	margin: 0;
	background-color: var(--code-background);
	color: var(--code-text-color);
	border-top: var(--code-language-bar-size) solid var(--code-language-bar-color);
}

/* Header chrome lives in styles/components/pane-header.css — code-snippet
   shares the .pane-header class with the interactive study panes. */

/* When header is present, remove language bar from pre */
code-snippet:has(header) pre {
	border-top: none;
}

code-snippet code {
	display: block;
	background-color: var(--code-background);
	padding: var(--code-padding);
	overflow: auto;
	font-family: var(--code-font-family);
	font-size: var(--code-font-size);
	font-weight: var(--code-font-weight);
	font-variation-settings: 'wght' var(--code-font-weight), 'wdth' 100, 'slnt' 0;
	line-height: var(--code-line-height);
	tab-size: var(--code-tab-size);
	color: var(--code-text-color);
	/* Default: no copying - students must type code by hand */
	user-select: none;
	-webkit-user-select: none;
	cursor: zoom-in;
}

/* Comments use handwriting font for friendlier feel */
code-snippet code .token.comment {
	font-family: var(--code-font-family-comment);
	font-variation-settings: 'wght' var(--code-font-weight), 'wdth' 100, 'slnt' 0;
}


/* =============================================================================
   COPY PERMISSIONS
   ============================================================================= */

/* $todo: Replace emoji with custom icon */
code-snippet header .lock {
	opacity: 0.5;
}

/* Allow copy when explicitly enabled */
code-snippet code.allow-copy {
	cursor: default;
	user-select: text;
	-webkit-user-select: text;
}

code-snippet code.allow-copy::selection,
code-snippet code.allow-copy *::selection {
	background-color: var(--code-selection-background);
	color: var(--code-selection-color);
}

/* CodeMirror editor selection — hand control back to the token system.
 *
 * CodeMirror's drawSelection extension injects its own ::selection rule at
 * Prec.highest with `background-color: Highlight !important` (Highlight is
 * the system color keyword). That's the ONE rule we have to defeat — hence
 * the single !important below. Without it, the browser auto-paints selected
 * text in HighlightText (black on macOS) as a side-effect of the system
 * Highlight background.
 *
 * Once the native selection paint is neutralized, the visible highlight is
 * drawn by CodeMirror's own .cm-selectionBackground layer behind the text
 * (via --study-selection-background inside the CM theme). Text keeps its
 * syntax colors via currentColor.
 *
 * Per-language / per-theme overrides work like any other --code-* token:
 * override --code-selection-background or --code-selection-color inside a
 * [data-language="..."] block or theme file. */
.cm-editor .cm-content ::selection,
.cm-editor .cm-content::selection,
.cm-editor .cm-content :focus::selection,
.cm-editor .cm-content :focus ::selection {
	background-color: var(--code-selection-background) !important;
	color: var(--code-selection-color) !important;
}


/* =============================================================================
   SUBTLE MODE — the Subtle palette
   Tokens go mostly white / lightly tinted so the three mark classes lead the
   eye. Authors use mark.one/two/three for correlation (same role = same
   color across the snippet, e.g. function definition + every call site).

   No !important needed: every selector here lands at (0,2,3) or higher, which
   beats the base prism token rules at (0,1,3). Marks live in their own block
   below MARK SYSTEM, ordered after these so they win on source order at equal
   specificity.
   ============================================================================= */

code-snippet.subtle[data-language] .token {
	color: rgba(255, 255, 255, 0.5);
}

code-snippet.subtle[data-language] .token.comment {
	color: var(--code-comment-color);
}

code-snippet.subtle[data-language] .token.punctuation {
	color: rgba(255, 255, 255, 0.4);
}


/* =============================================================================
   NONE MODE
   No syntax highlighting
   ============================================================================= */

code-snippet.none .token {
	color: rgba(255, 255, 255, 0.9);
}


/* =============================================================================
   INLINE CODE
   Code within paragraphs (not in code-snippet blocks)
   ============================================================================= */

text-content p code.language-none {
	font-family: monospace;
	font-size: 0.9em;
	display: inline-block;
	overflow-y: visible;
	background: rgba(255, 255, 255, 0.7);
	color: #008000;
	cursor: default;
	user-select: text;
}


/* =============================================================================
   MARK SYSTEM
   Pedagogical highlighting with <mark> tags.

   Contract: mark colors only appear in SUBTLE mode. In PRISM and NONE, any
   stored <mark> tags render as invisible wrappers (color: inherit) so the
   surrounding token / plain colors carry through. The mark is in the source
   either way; the mode decides whether it's visible.

   Specificity, no !important:
     code-snippet .token.X         (0,1,3) — base prism token color
     code-snippet.subtle[data-language] .token.X (0,2,3) — subtle palette overrides
     code-snippet.subtle[data-language] mark.X .token   (0,3,3) — mark wins over palette

   The reset rule first kills typography.css's global prose mark styling
   (yellow background, dark text, inline-block) so it can't leak into any
   part of the code-snippet — including any <mark> that ends up in the
   <header> / .file-name area through stored content.
   ============================================================================= */

code-snippet mark {
	background: none;
	color: inherit;
	display: inline;
	padding: 0;
}

/* Plain <mark> (no class) defaults to the primary mark color. */
code-snippet.subtle[data-language] mark,
code-snippet.subtle[data-language] mark .token {
	color: var(--code-mark-one);
}

code-snippet.subtle[data-language] mark.one,
code-snippet.subtle[data-language] mark.one .token {
	color: var(--code-mark-one);
}

code-snippet.subtle[data-language] mark.two,
code-snippet.subtle[data-language] mark.two .token {
	color: var(--code-mark-two);
}

code-snippet.subtle[data-language] mark.three,
code-snippet.subtle[data-language] mark.three .token {
	color: var(--code-mark-three);
}


/* =============================================================================
   PRISM.JS SYNTAX HIGHLIGHTING
   Maps Prism's .token classes to our unified tokens from code-tokens.css
   ============================================================================= */

code-snippet .token.comment { color: var(--code-comment-color); }
code-snippet .token.prolog { color: var(--code-comment-color); }
code-snippet .token.doctype { color: var(--code-comment-color); }
code-snippet .token.cdata { color: var(--code-comment-color); }

code-snippet .token.punctuation { color: var(--code-punctuation-color); }
code-snippet .token.operator { color: var(--code-operator-color); }
code-snippet .token.keyword { color: var(--code-keyword-color); }
code-snippet .token.function { color: var(--code-function-color); }
code-snippet .token.string { color: var(--code-string-color); }
code-snippet .token.number { color: var(--code-number-color); }
code-snippet .token.variable { color: var(--code-variable-color); }
code-snippet .token.tag { color: var(--code-tag-color); }
code-snippet .token.attr-name { color: var(--code-attribute-color); }
code-snippet .token.attr-value { color: var(--code-string-color); }
code-snippet .token.selector { color: var(--code-selector-color); }
code-snippet .token.property { color: var(--code-property-color); }
code-snippet .token.atrule { color: var(--code-keyword-color); }
code-snippet .token.delimiter { color: var(--code-delimiter-color); }


/* =============================================================================
   PLAIN TEXT / PSEUDOCODE
   No syntax highlighting, clean white text
   ============================================================================= */

code-snippet pre.language-plaintext code,
code-snippet pre.language-mixed code {
	color: rgba(255, 255, 255, 0.9);
}


/* =============================================================================
   TERMINAL / BASH
   Simple white scheme - it's output, not syntax
   ============================================================================= */

code-snippet pre.language-bash code {
	color: white;
}

code-snippet pre.language-bash .token:not(.comment) {
	color: white;
}