/* =============================================================================
 * codeblock.css — reusable copy-to-clipboard code block
 * [claude:<synthetic>][client:2.1.159][hurc:v0.11.594]
 *
 * PURPOSE
 *   Styles the `neural.code.copyblock` layout (templates/nllm/html/layouts/
 *   neural/code/copyblock.php): a standard terminal-style code block — a chrome
 *   bar (macOS traffic-light dots + language label + Copy button) above a wrapping
 *   <pre><code> command with a decorative "$ " prompt. Replaces the old
 *   .nl-downloads__cmd-block horizontal-scroll region: the command WRAPS (no
 *   scrollbar), the Copy button lives in the bar (never over the code), and one
 *   click copies the command verbatim — the "$ " prompt is a CSS ::before, so it
 *   is shown but NOT copied.
 *
 * ARCHITECTURE
 *   Token-clean. Every gated property (color, padding/margin/gap, font-size,
 *   border-radius, transition) uses a var(--nllm-*) brand token or a component-local
 *   var(--cc-*) wrapping an off-scale literal. Non-gated properties (display, flex,
 *   white-space, word-break, cursor, @media) are used directly. Mirrors the --ch-*
 *   technique in channels.css and --dl-* in downloads.css.
 *
 * DEPENDENCIES
 *   Requires the brand token sheet (media/com_neurallicense/brand/tokens.css).
 *   Literal fallbacks on every var() keep the block self-sufficient if tokens.css
 *   is absent. Clipboard behaviour is in templates/nllm/js/codeblock.js (keyed off
 *   [data-neural-copy-code]); the "Copied!" label swap is driven there via the
 *   --copied modifier class.
 *
 * MOBILE-FIRST
 *   The bar and the code area both span full width and wrap; nothing overflows at
 *   320px. The Copy button sits in the bar at every width, so there is no
 *   over-the-code overlap to manage responsively.
 * ============================================================================= */

.neural-codeblock {
	/* ── Component token declarations ──────────────────────────────────────
	 * Off-scale or component-specific literals defined once so every usage
	 * below is a token reference, never a bare literal. */
	--cc-surface:     var(--nllm-surface-deep, #0f172a);
	--cc-bar:         var(--nllm-surface, #1e293b);
	--cc-edge:        var(--nllm-surface-soft, #334155);
	--cc-text:        var(--nllm-text, #f8fafc);
	--cc-muted:       var(--nllm-text-subtle, #94a3b8);
	--cc-accent:      var(--nllm-violet-soft, #a855f7);
	--cc-on-accent:   #fff;
	--cc-save:        var(--pc-save-text, #86efac);
	--cc-radius:      var(--nllm-radius-md, 12px);
	--cc-radius-sm:   var(--nllm-radius-sm, 6px);

	--cc-space-04:    0.4rem;
	--cc-space-055:   0.55rem;
	--cc-space-075:   0.75rem;
	--cc-space-11:    1.1rem;

	/* macOS-style traffic-light dots — red/amber are brand-neutral terminal chrome
	 * (kept as component-local literals), but the GREEN dot is unified to the
	 * brand flowing-green token so every green on the site reads as ONE green
	 * (2026-07-02 green-token unification). */
	--cc-dot:         0.72rem;
	--cc-dot-close:   #ff5f56;
	--cc-dot-min:     #ffbd2e;
	--cc-dot-max:     var(--pc-status-flowing, #22c55e);

	--cc-fs-code:     0.9rem;
	--cc-fs-btn:      0.78rem;
	--cc-fs-lang:     0.72rem;

	/* ── Block frame ─────────────────────────────────────────────────────── */
	/* A single dark, bordered, clipped frame: the bar and the code share one
	 * rounded rectangle. */
	display: block;
	margin: var(--cc-space-075) 0;
	border-radius: var(--cc-radius);
	background: var(--cc-surface);
	border: 1px solid var(--cc-edge);
	overflow: hidden;
}

/* ── Chrome bar ──────────────────────────────────────────────────────────────
 * The terminal title bar: traffic-light dots (left), language label, and the Copy
 * button pinned right. Slightly lighter than the code area, with a hairline rule. */
.neural-codeblock__bar {
	display: flex;
	align-items: center;
	gap: var(--cc-space-055);
	padding: var(--cc-space-04) var(--cc-space-055) var(--cc-space-04) var(--cc-space-075);
	background: var(--cc-bar);
	border-bottom: 1px solid var(--cc-edge);
}

/* Three decorative dots. */
.neural-codeblock__dots {
	display: inline-flex;
	gap: var(--cc-space-04);
	flex: 0 0 auto;
}

.neural-codeblock__dot {
	display: inline-block;
	width: var(--cc-dot);
	height: var(--cc-dot);
	border-radius: 50%;
	background: var(--cc-dot-close);
}

.neural-codeblock__dot:nth-child(2) {
	background: var(--cc-dot-min);
}

.neural-codeblock__dot:nth-child(3) {
	background: var(--cc-dot-max);
}

/* Language label — quiet uppercase mono tag; pushes the Copy button to the right. */
.neural-codeblock__lang {
	margin-right: auto;
	color: var(--cc-muted);
	font-family: var(--nllm-font-mono, 'JetBrains Mono', monospace);
	font-size: var(--cc-fs-lang);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ── Copy button (in the bar) ────────────────────────────────────────────────
 * Compact ghost button: violet outline that fills on hover/focus; flips to the
 * green success token while the JS holds the --copied state. */
.neural-codeblock__copy {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-04);
	flex: 0 0 auto;
	padding: var(--cc-space-04) var(--cc-space-055);
	border-radius: var(--cc-radius-sm);
	background: transparent;
	border: 1px solid var(--cc-accent);
	color: var(--cc-accent);
	font-family: var(--nllm-font-sans, 'Inter', system-ui, sans-serif);
	font-size: var(--cc-fs-btn);
	font-weight: var(--nllm-font-weight-semibold, 600);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: background var(--nllm-transition-fast, 120ms ease),
	            color var(--nllm-transition-fast, 120ms ease),
	            border-color var(--nllm-transition-fast, 120ms ease);
}

/* Clipboard glyph — inherits the button's currentColor (idle/hover/success);
 * flex:0 0 auto so it never shrinks beside the label. */
.neural-codeblock__copy-icon {
	flex: 0 0 auto;
}

.neural-codeblock__copy:hover,
.neural-codeblock__copy:focus-visible {
	background: var(--cc-accent);
	color: var(--cc-on-accent);
}

/* Success state held by codeblock.js for ~2s after a copy: green outline + the
 * label reads "Copied!". */
.neural-codeblock__copy--copied,
.neural-codeblock__copy--copied:hover,
.neural-codeblock__copy--copied:focus-visible {
	background: transparent;
	border-color: var(--cc-save);
	color: var(--cc-save);
}

/* ── Code area ───────────────────────────────────────────────────────────────
 * The command WRAPS (pre-wrap + word-break) so a long curl|bash one-liner stays
 * fully visible with no horizontal scrollbar. A decorative green "$ " prompt is
 * added via ::before — shown but NOT copied (the handler copies textContent). */
.neural-codeblock__pre {
	margin: 0;
	padding: var(--cc-space-075) var(--cc-space-11);
	overflow: visible;
}

.neural-codeblock__code {
	display: block;
	font-family: var(--nllm-font-mono, 'JetBrains Mono', monospace);
	font-size: var(--cc-fs-code);
	color: var(--cc-text);
	white-space: pre-wrap;
	word-break: break-all;
}

.neural-codeblock__code::before {
	content: '$ ';
	color: var(--cc-save);
	user-select: none;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.neural-codeblock__copy {
		transition: none;
	}
}