/* =========================================================
   1delta Docs — Code Styling (HonKit + highlight.js)
   ---------------------------------------------------------
   - Theming via CSS variables
   - Clean focus states (no stacked outlines)
   - Works for both block and inline code
   - Highlight.js token colors included
   - Optional line numbers & “copy” UI hooks
   ========================================================= */

/* ---------- CSS variables (light theme default) ---------- */
:root {
  /* Brand + surfaces */
  --code-bg: #0f1823;          /* block background */
  --code-inline-bg: rgba(15,24,35,.75);
  --code-surface: #111a27;     /* header/toolbar surface */
  --code-border: #1c2a3b;
  --code-shadow: rgba(0,0,0,.25);

  /* Text & tokens */
  --code-fg: #f8f8f2;
  --code-dim: #c8d1dc;
  --code-accent: #79b8ff;

  /* Token palette (HLJS-ish) */
  --tok-comment: #6b8299;      /* .hljs-comment, .hljs-quote */
  --tok-keyword: #ff7b72;      /* .hljs-keyword */
  --tok-string: #a5d6ff;       /* .hljs-string */
  --tok-number: #f2cc60;       /* .hljs-number */
  --tok-type: #7ee787;         /* .hljs-type, .hljs-class */
  --tok-func: #d2a8ff;         /* .hljs-function, .hljs-title */
  --tok-attr: #e6ccff;         /* .hljs-attr */
  --tok-builtin: #ffa657;      /* .hljs-built_in */
  --tok-literal: #f2cc60;      /* .hljs-literal */
  --tok-variable: #ffdfb0;     /* .hljs-variable */
  --tok-operator: #c9d1d9;     /* .hljs-operator */
  --tok-meta: #7aa2f7;         /* .hljs-meta */

  /* UI */
  --radius: 10px;
  --radius-lg: 12px;
  --pad: 16px;
  --font-mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Selection */
  --sel-bg: rgba(121,184,255,.25);
  --sel-fg: var(--code-fg);

  /* Scrollbar */
  --scroll-track: rgba(255,255,255,.04);
  --scroll-thumb: rgba(255,255,255,.20);
  --scroll-thumb-hover: rgba(255,255,255,.35);
}

/* ---------- Optional light mode override ---------- */
@media (prefers-color-scheme: light) {
  :root {
    --code-bg: #0f1823;               /* keep brand-dark blocks for contrast */
    --code-inline-bg: rgba(15,24,35,.12);
    --code-surface: #e9edf3;
    --code-border: #cfd8e3;
    --code-shadow: rgba(15,24,35,.15);

    --code-fg: #eef2f6;
    --code-dim: #dbe3ec;
  }
}

/* ---------- Base resets for consistency ---------- */
pre, code, kbd, samp {
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  tab-size: 2;
  font-variant-ligatures: contextual;
}

/* =========================================================
   BLOCK CODE
   Target both GitBook/HonKit DOM and generic pre > code.
   ========================================================= */
.book .book-body .page-wrapper .page-inner section.normal pre,
section.normal pre {
  position: relative;
  margin: 1.2rem 0;
  background: var(--code-bg);
  color: var(--code-fg);
  border: 1px solid var(--code-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 24px var(--code-shadow);
  overflow: hidden; /* contain header and scroll */
}

/* Avoid stacked outlines: use a single inset focus ring on the pre */
section.normal pre:focus-within {
  outline: none;
  border-color: var(--code-accent);
  box-shadow:
    inset 0 0 0 2px var(--code-accent),
    0 6px 24px var(--code-shadow);
}

.book .book-body .page-wrapper .page-inner section.normal pre code,
section.normal pre code {
  display: block;
  padding: calc(var(--pad) + 8px) var(--pad) var(--pad); /* extra for header bar */
  line-height: 1.55;
  background: transparent; /* use pre’s bg */
  color: inherit;
  overflow-x: auto;
  white-space: pre; /* keep formatting */
  scroll-behavior: smooth; /* nicer horizontal scroll */
}

/* Ensure the code element never adds another border/outline */
section.normal pre code,
section.normal pre .hljs {
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: calc(var(--pad) + 8px) var(--pad) var(--pad);
  border-radius: 0;
}

/* Header bar (language label / filename / copy button area).
   Add a sibling element <div class="code-header">…</div> *before* <code> if you want UI. */
section.normal pre .code-header {
  position: absolute;
  inset: 0 0 auto 0;
  height: 36px;
  background: linear-gradient(0deg, transparent, rgba(0,0,0,.08));
  background-color: var(--code-surface);
  /* Prevent “double border” with the pre’s border */
  border-bottom: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: var(--code-dim);
  font-size: 12px;
  letter-spacing: .2px;
  user-select: none;
}

/* On focus, show a subtle separator without stacking with the pre */
section.normal pre:focus-within .code-header {
  border-bottom-color: rgba(255,255,255,.12);
}

/* Optional macOS-style traffic lights */
section.normal pre .code-header .lights {
  display: inline-flex; gap: 6px; margin-right: 8px;
}
section.normal pre .code-header .lights i {
  width: 10px; height: 10px; border-radius: 50%;
  background: #ff5f57; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
section.normal pre .code-header .lights i:nth-child(2){ background:#febc2e; }
section.normal pre .code-header .lights i:nth-child(3){ background:#28c840; }

/* Language/filename label */
section.normal pre .code-header .label {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--code-border);
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--code-fg);
  line-height: 1;
}
section.normal pre .code-header .spacer {
  flex: 1 1 auto;
}

/* Copy button — a11y-friendly without stacking focus rings */
section.normal pre .code-header .copy-btn {
  border: 1px solid var(--code-border);
  background: transparent;
  color: var(--code-dim);
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease;
}
section.normal pre .code-header .copy-btn:hover {
  background: rgba(255,255,255,.05);
  color: var(--code-fg);
  border-color: rgba(255,255,255,.2);
}
section.normal pre .code-header .copy-btn:active {
  transform: translateY(1px);
}
/* Show focus ring only for keyboard users (no stacked outlines) */
section.normal pre .code-header .copy-btn:focus { outline: none; }
section.normal pre .code-header .copy-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--code-accent);
  border-color: var(--code-accent);
}

/* Selection color within code */
section.normal pre ::selection,
section.normal pre code ::selection {
  background: var(--sel-bg);
  color: var(--sel-fg);
}

/* ------- Scrollbar polish ------- */
section.normal pre code::-webkit-scrollbar {
  height: 10px;
}
section.normal pre code::-webkit-scrollbar-track {
  background: var(--scroll-track);
}
section.normal pre code::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 6px;
}
section.normal pre code::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}
/* Firefox */
section.normal pre code {
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

/* =========================================================
   INLINE CODE
   ========================================================= */
.book .book-body .page-wrapper .page-inner section.normal code,
section.normal p code,
section.normal li code,
section.normal td code,
section.normal dt code,
section.normal dd code {
  background: var(--code-inline-bg);
  color: var(--code-fg);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: .95em;
  border: 1px solid var(--code-border);
  box-shadow: 0 1px 0 rgba(0,0,0,.12) inset;
}

/* Avoid styling block code as inline if nested */
section.normal pre code,
section.normal pre .hljs {
  border: 0;
  box-shadow: none;
}

/* =========================================================
   HIGHLIGHT.JS TOKEN COLORS
   ========================================================= */
.hljs-comment, .hljs-quote { color: var(--tok-comment); font-style: italic; }
.hljs-keyword, .hljs-selector-tag { color: var(--tok-keyword); }
.hljs-string, .hljs-doctag, .hljs-template-tag, .hljs-template-variable { color: var(--tok-string); }
.hljs-number, .hljs-literal { color: var(--tok-number); }
.hljs-type, .hljs-class, .hljs-built_in { color: var(--tok-type); }
.hljs-function .hljs-title, .hljs-title.function_ { color: var(--tok-func); }
.hljs-attr, .hljs-attribute { color: var(--tok-attr); }
.hljs-variable, .hljs-title.class_, .hljs-property { color: var(--tok-variable); }
.hljs-operator, .hljs-punctuation, .hljs-symbol { color: var(--tok-operator); }
.hljs-meta, .hljs-meta .hljs-keyword, .hljs-meta .hljs-string { color: var(--tok-meta); }
.hljs-addition { background: rgba(46,160,67,.18); }
.hljs-deletion { background: rgba(248,81,73,.18); }

/* Give .hljs a tiny contrast lift on dark bg */
.hljs {
  color: var(--code-fg);
  background: transparent;
  text-shadow: 0 0 1px rgba(0,0,0,.1);
}

/* =========================================================
   OPTIONAL: LINE NUMBERS (requires lines wrapped in .line)
   ---------------------------------------------------------
   If you later emit:
     <pre><code><span class="line">…</span>\n…</code></pre>
   these rules render a gutter. Harmless if unused.
   ========================================================= */
section.normal pre code {
  counter-reset: ln;
}
section.normal pre code .line {
  display: block;
  counter-increment: ln;
  padding-left: 3.25em; /* space for gutter */
  position: relative;
}
section.normal pre code .line::before {
  content: counter(ln);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5em;
  text-align: right;
  color: var(--code-dim);
  opacity: .7;
  padding-right: .75em;
  user-select: none;
}

/* Highlight a target line via id (e.g., #L23) */
section.normal pre code .line:target {
  background: rgba(121,184,255,.12);
  outline: 1px dashed rgba(121,184,255,.35);
}

/* =========================================================
   RESPONSIVE & PRINT
   ========================================================= */
@media (max-width: 680px) {
  section.normal pre code {
    font-size: 13.5px;
    line-height: 1.6;
  }
  section.normal pre .code-header {
    height: 34px;
    font-size: 11px;
  }
}

@media print {
  section.normal pre {
    box-shadow: none;
  }
  section.normal pre code {
    overflow: visible;
    white-space: pre-wrap;
    word-break: break-word;
  }
}

/* =========================================================
   ACCESSIBILITY / PREFERENCES
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  section.normal pre .code-header .copy-btn {
    transition: none;
  }
}

/* =========================================================
   KBD (nice small touches for inline shortcuts)
   ========================================================= */
kbd {
  background: var(--code-surface);
  border: 1px solid var(--code-border);
  border-bottom-width: 2px;
  color: var(--code-fg);
  border-radius: 6px;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: .85em;
}

/* =========================================================
   OPTIONAL: PER-LANGUAGE LABEL COLORS (via data-lang)
   Add with your header script: pre.setAttribute("data-lang", "typescript")
   ========================================================= */
section.normal pre[data-lang*="typescript"] .code-header .label { background: rgba(49,120,198,.20); border-color: rgba(49,120,198,.35); }
section.normal pre[data-lang*="javascript"] .code-header .label { background: rgba(247,223,30,.20); border-color: rgba(247,223,30,.35); }
section.normal pre[data-lang*="json"] .code-header .label       { background: rgba(121,184,255,.18); border-color: rgba(121,184,255,.35); }
section.normal pre[data-lang*="bash"] .code-header .label       { background: rgba(85,181,72,.20); border-color: rgba(85,181,72,.35); }
section.normal pre[data-lang*="yaml"] .code-header .label       { background: rgba(111,66,193,.18); border-color: rgba(111,66,193,.35); }
section.normal pre[data-lang*="solidity"] .code-header .label   { background: rgba(0,163,173,.18); border-color: rgba(0,163,173,.35); }
section.normal pre[data-lang*="sql"] .code-header .label        { background: rgba(242,204,96,.18); border-color: rgba(242,204,96,.35); }
section.normal pre[data-lang*="rust"] .code-header .label       { background: rgba(235,86,86,.18); border-color: rgba(235,86,86,.35); }
section.normal pre[data-lang*="go"] .code-header .label         { background: rgba(0,173,216,.18); border-color: rgba(0,173,216,.35); }
section.normal pre[data-lang*="python"] .code-header .label     { background: rgba(53,114,165,.18); border-color: rgba(53,114,165,.35); }


.book .book-body .page-wrapper .page-inner section.normal *:focus,
.book .book-body .page-wrapper .page-inner section.normal *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* =========================================================
   Fix unwanted gray background on operators (=, +, etc.)
   ========================================================= */

/* Kill background from Prism's theme */
.token.operator,
.token.punctuation,
.token.attr-equals {
  background: transparent !important;
  box-shadow: none !important;
}

/* Keep text color consistent */
.token.operator,
.token.punctuation,
.token.attr-equals {
  color: inherit !important;
}