/* ==========================================================================
   css/components/code-card.css
   Split from app.html (build 2026.10.08.9-beta), original lines 4156-4235.
   Rules are in their ORIGINAL order; load order is defined in index.html.
   ========================================================================== */
/* NONONONONO code CARD: header (language + copy) · body · footer (char/line count). One
   frame (the card border) + two inner divider LINES for the header/footer - no nested box.
   The dark ground + a fixed dark divider are theme-independent. */
.code-card { --code-bg: #0d1117; --code-line: #2a3039;
  border: 1px solid var(--code-line); border-radius: 10px; overflow: hidden; margin: 6px 0; background: var(--code-bg); max-width: 100%; }
/* No header divider line: the card outline is the ONLY border. The language label + copy
   sit at the top and the code below with no internal separator (the header line + the
   footer line together read as "two separators" - both are gone now). */
.code-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 2px 12px; background: var(--code-bg); }
.code-card-lang { font-size: 12px; font-weight: 600; color: #c9d1d9; letter-spacing: .01em; }
.code-card .code-copy { position: static; width: 26px; height: 26px; opacity: .7; background: transparent; border-color: transparent; color: #c9d1d9; }
.code-card .code-copy:hover { opacity: 1; background: #ffffff14; border-color: transparent; }
/* No border AND no inner radius on the code body: the card is the only frame (kills the
   "two borders" - the inner rounded rectangle that sat inside the card outline). */
.code-card pre.code-wrap { margin: 0; border: none; border-radius: 0; background: var(--code-bg); }
.code-card pre.code-wrap > code.hljs { background: var(--code-bg) !important; border-radius: 0 !important; }
/* ONE border all the way around the card, and NO internal divider lines (no header/footer
   lines on the sides). Outline/shadow off so nothing doubles up. */
.code-card, .code-card *, pre.code-wrap, .cb-code pre, .cb-code pre * { outline: 0 !important; box-shadow: none !important; }
/* Internal code elements NEVER draw VERTICAL (left/right) borders - only the CARD outlines
   the sides. This makes stacked/doubled vertical lines impossible: code-wrap, its <code>,
   and the header/footer can only ever contribute HORIZONTAL divider lines, never side ones. */
.code-card > *, .code-card pre.code-wrap, .code-card pre.code-wrap > code, .cb-code pre { border-left: 0 !important; border-right: 0 !important; }
/* Footer (char/line count) has NO divider line of its own - the header divider is the
   single separator in the card. (Header line + footer line read as "two separators".) */
.code-card-foot { padding: 4px 12px 6px; font-size: 11px; color: #8b949e; font-family: 'JetBrains Mono', 'Fira Code', monospace; }
/* Inlined highlight.js (github-dark) token colours so syntax highlighting NEVER depends
   on the external CDN stylesheet loading - the block was rendering all-one-colour when
   that CSS didn't apply. */
code.hljs { color: #e6edf3; }
.hljs-comment, .hljs-quote { color: #8b949e; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag, .hljs-name, .hljs-section, .hljs-meta .hljs-keyword { color: #ff7b72; }
.hljs-string, .hljs-attr, .hljs-meta-string, .hljs-regexp, .hljs-addition { color: #a5d6ff; }
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-selector-attr, .hljs-selector-pseudo { color: #79c0ff; }
.hljs-title, .hljs-title.function_, .hljs-selector-id, .hljs-selector-class { color: #d2a8ff; }
.hljs-type, .hljs-built_in, .hljs-builtin-name, .hljs-class .hljs-title, .hljs-variable.language_ { color: #ffa657; }
.hljs-variable, .hljs-template-variable, .hljs-attribute, .hljs-params { color: #ffa657; }
.hljs-tag { color: #7ee787; }
.hljs-tag .hljs-name { color: #7ee787; }
.hljs-meta { color: #79c0ff; }
.hljs-deletion { color: #ffa198; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }
/* Light theme: a real LIGHT code editor (github-light). Light mode should read as light in
   code blocks too - not a dark editor. Overrides the dark ground + dark syntax tokens. */
/* Light code blocks are BORDERLESS too (no separator anywhere). Instead of light-on-light
   (which needed an outline), the ground is a slightly DARKER recessed grey than the light
   chat (#f1f2f5), so the block reads as a sunken code well with no border/line at all. */
[data-theme="light"] pre { background: #e6e9ef; border: none; }
[data-theme="light"] pre > code.hljs { background: #e6e9ef !important; }
[data-theme="light"] .code-card { --code-bg: #e6e9ef; --code-line: #d0d7de; }
[data-theme="light"] .code-card-lang, [data-theme="light"] .code-card .code-copy { color: #1f2328; }
[data-theme="light"] .code-card .code-copy:hover { background: #0000000f; }
[data-theme="light"] .code-card-foot { color: #6e7781; }
[data-theme="light"] code.hljs { color: #1f2328; }
[data-theme="light"] .hljs-comment, [data-theme="light"] .hljs-quote { color: #6e7781; }
[data-theme="light"] .hljs-keyword, [data-theme="light"] .hljs-selector-tag, [data-theme="light"] .hljs-literal, [data-theme="light"] .hljs-doctag, [data-theme="light"] .hljs-name, [data-theme="light"] .hljs-section, [data-theme="light"] .hljs-meta .hljs-keyword { color: #cf222e; }
[data-theme="light"] .hljs-string, [data-theme="light"] .hljs-attr, [data-theme="light"] .hljs-meta-string, [data-theme="light"] .hljs-regexp, [data-theme="light"] .hljs-addition { color: #0a3069; }
[data-theme="light"] .hljs-number, [data-theme="light"] .hljs-symbol, [data-theme="light"] .hljs-bullet, [data-theme="light"] .hljs-selector-attr, [data-theme="light"] .hljs-selector-pseudo { color: #0550ae; }
[data-theme="light"] .hljs-title, [data-theme="light"] .hljs-title.function_, [data-theme="light"] .hljs-selector-id, [data-theme="light"] .hljs-selector-class { color: #8250df; }
[data-theme="light"] .hljs-type, [data-theme="light"] .hljs-built_in, [data-theme="light"] .hljs-builtin-name, [data-theme="light"] .hljs-class .hljs-title, [data-theme="light"] .hljs-variable.language_ { color: #953800; }
[data-theme="light"] .hljs-variable, [data-theme="light"] .hljs-template-variable, [data-theme="light"] .hljs-attribute, [data-theme="light"] .hljs-params { color: #953800; }
[data-theme="light"] .hljs-tag, [data-theme="light"] .hljs-tag .hljs-name { color: #116329; }
[data-theme="light"] .hljs-meta { color: #0550ae; }
[data-theme="light"] .hljs-deletion { color: #82071e; }
/* Copy button on code blocks - appears on hover, top-right of the block. */
pre.code-wrap { position: relative; }
.code-copy { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); cursor: pointer; opacity: .6; transition: opacity .12s, color .12s; z-index: 2; }
/* Always visible (not just on hover) so it's discoverable and works on mobile where there is no hover. */
pre.code-wrap:hover .code-copy { opacity: 1; }
.code-copy:hover { color: var(--text-primary); border-color: var(--accent); }
.code-copy.copied { color: #3ba55d; border-color: #3ba55d; opacity: 1; }
/* Inline `code` with a small copy button to its right */
.ic-wrap { display: inline-flex; align-items: center; gap: 2px; vertical-align: baseline; }
.ic-copy { display: inline-flex; align-items: center; justify-content: center; padding: 1px 2px; background: none; border: none; color: var(--text-muted); cursor: pointer; opacity: .45; transition: opacity .12s, color .12s; vertical-align: middle; line-height: 0; }
.ic-wrap:hover .ic-copy, .ic-copy:hover { opacity: 1; }
.ic-copy:hover { color: var(--text-primary); }
.ic-copy.copied { color: #3ba55d; opacity: 1; }
code { background: var(--bg-active); border: 1px solid var(--border); border-radius: 3px; padding: 1px 4px; font-size: 12px; font-family: 'JetBrains Mono', 'Fira Code', monospace; }