/*
 * Site-wide styles for the code-block decorator.
 *
 * Paired with ``static/gamedevnext/js/code-decorate.js`` — the JS adds
 * the toolbar, gutter, and collapse DOM; these rules style them.
 *
 * Loaded from ``gamedevnext/templates/gamedevnext/base.html`` so anon
 * users viewing tutorials / blog posts / projects pick them up too.
 * ``.msg-content``-scoped visual rules (bubble background, inline code
 * pill, hljs token colours duplicated there) still live in
 * ``static/css/editor/message_editor.css`` — which only ships on pages
 * with the messaging bundle and does no harm to load on top of this.
 *
 * Rules below are intentionally NOT scoped to a surface class: they
 * react to marker classes the decorator applies (``.msg-code-*``),
 * which keeps them surface-agnostic. Per-surface theming (e.g. the
 * fade-out colour on the collapsed state) flows through CSS custom
 * properties declared at the bottom of this file.
 */

/* -------------------------------------------- Toolbar (badge + copy) */
.msg-code-toolbar {
    position: absolute;
    top: 0.35em;
    right: 0.4em;
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.68em;
    opacity: 0;
    transition: opacity 120ms ease;
    z-index: 2;
}
pre.msg-code-decorated:hover > .msg-code-toolbar,
pre.msg-code-decorated:focus-within > .msg-code-toolbar { opacity: 1; }
.msg-code-lang {
    padding: 0.15em 0.5em;
    border-radius: 0.25em;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.msg-code-copy {
    padding: 0.15em 0.5em;
    border: 0;
    border-radius: 0.25em;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    cursor: pointer;
    font: inherit;
}
.msg-code-copy:hover { background: rgba(0, 0, 0, 0.6); }

/* ------------------------------------------------ Line numbers (gutter) */
pre.msg-code-with-ln {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.85em;
}
pre.msg-code-with-ln > code { min-width: 0; }
.msg-code-gutter {
    color: currentColor;
    opacity: 0.6;
    text-align: right;
    user-select: none;
    white-space: pre;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    padding-right: 0.35em;
    border-right: 1px solid rgba(128, 128, 128, 0.25);
}

/* ------------------------------------------------ Collapse (long snippets) */
/* Pre-cap long snippets before the decorator runs so the collapse does not
   shift the page (CLS); blocks under the threshold are shorter than the cap. */
.prose pre:not(.msg-code-decorated),
#messages-container pre:not(.msg-code-decorated) {
    max-height: calc(20 * 1.45em + 2.75em);
    overflow: hidden;
}
pre.msg-code-collapsible { position: relative; }
pre.msg-code-collapsed {
    max-height: calc(var(--msg-code-max-lines, 20) * 1.45em + 2.75em);
    overflow: hidden;
}
pre.msg-code-collapsed::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2em;
    height: 2.25em;
    background: linear-gradient(transparent, var(--msg-code-fade, #0f172a));
    pointer-events: none;
}
.msg-code-expand {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.3em 0;
    font-size: 0.72em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--msg-code-expand-fg, #e2e8f0);
    background: var(--msg-code-expand-bg, rgba(15, 23, 42, 0.85));
    border: 0;
    border-top: 1px solid rgba(128, 128, 128, 0.25);
    cursor: pointer;
    font-family: inherit;
}
.msg-code-expand:hover {
    background: var(--msg-code-expand-bg-hover, rgba(30, 41, 59, 0.95));
}

/* Surface overrides for the fade gradient + expand button.
 *
 * Messaging bubbles (``.msg-content pre``) use the dark slate bubble
 * background and inherit the defaults above. GDX ``.prose`` surfaces
 * inherit hljs's GitHub theme — github-light in light mode, github-dark
 * in dark mode. The site's dark-mode strategy is class-based (``.dark``
 * on <html>), and ``base.html`` now toggles the hljs light/dark
 * stylesheets off that class too, so the fade/expand chrome keys off the
 * same ``.dark`` class to stay in sync (no ``prefers-color-scheme``).
 * Deliberately every ``.prose`` surface, not only tutorials/blogs: the hljs
 * sheet switch is page-wide, so a forum post keeping a dark surface would
 * render light-theme tokens on it.
 */
.prose pre {
    background-color: #f6f8fa;
    color: #24292f;
}
.dark .prose pre {
    background-color: #0d1117;
    color: #c9d1d9;
}
.prose pre code.hljs { background: transparent; }
.prose .msg-code-gutter { color: #57606a; opacity: 1; }
.dark .prose .msg-code-gutter { color: #8b949e; }
.prose pre.msg-code-collapsible {
    --msg-code-fade: #f6f8fa;
    --msg-code-expand-bg: rgba(246, 248, 250, 0.92);
    --msg-code-expand-bg-hover: rgba(234, 238, 242, 0.98);
    --msg-code-expand-fg: #24292f;
}
.dark .prose pre.msg-code-collapsible {
    --msg-code-fade: #0d1117;
    --msg-code-expand-bg: rgba(13, 17, 23, 0.92);
    --msg-code-expand-bg-hover: rgba(22, 27, 34, 0.98);
    --msg-code-expand-fg: #c9d1d9;
}