/* code.css — the styles for gapi_tabs() and the assets/hl.js token palette.
 *
 * These lived in docs.css, which meant the shared code component only looked
 * right on documentation pages. Used anywhere else it rendered as an unstyled
 * stack of panels in monochrome — which is exactly what happened on
 * /data-integrity.
 *
 * The component's styles belong with the component, not with one of its
 * consumers. .code itself is already global in site.css; only these two blocks
 * were trapped.
 */

/* ---- tabs ---- */
.tabbar { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tabbar [role="tab"] { font: 600 14px var(--body); color: var(--mut); background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; cursor: pointer; }
.tabbar [role="tab"]:hover { color: var(--ink); }
.tabbar [role="tab"].on { color: var(--green); border-bottom-color: var(--green); }
.tabpanel { display: none; }
.tabpanel.on { display: block; }

/* ---- syntax token palette (legible on --night, kept in-brand) ---- */
.tok-punct { color: #7E9186; }
.tok-key   { color: #E6C07C; }   /* JSON keys, PHP/shell $vars */
.tok-str   { color: #86D9A6; }
.tok-num   { color: #7FC7E6; }
.tok-atom  { color: #E79A5C; }   /* true / false / null, keywords */
.tok-func  { color: #8FC9EA; }
.tok-cmt   { color: #647A70; font-style: italic; }
.tok-cmd   { color: #86D9A6; font-weight: 600; }
.tok-flag  { color: #E79A5C; }