/* ================================================================
   DataHints DS — Codeblock Component
   Requires: tokens.css
   ================================================================ */

  /* ============================================================
     CODE BLOCK — always dark, regardless of page theme
  ============================================================ */

  /* Fixed palette — dark bg #0a0515, never changes with theme */
  :root {
    --cb-bg:        #0a0515;
    --cb-header-bg: rgba(255, 255, 255, 0.035);
    --cb-border:    rgba(160, 163, 255, 0.13);    /* EP tint */
    --cb-base:      #a1a1a6;   /* default text — fg-2 dark */

    /* Syntax tokens */
    --tok-kw:    #a0a3ff;   /* keywords — EP-300 */
    --tok-fn:    #c294ec;   /* functions, methods — AM-400 */
    --tok-str:   #4effb8;   /* strings — MT-400 */
    --tok-num:   #ffc852;   /* numbers, booleans — AB-400 */
    --tok-cmt:   #5a5a6a;   /* comments — muted */
    --tok-type:  #06bcc1;   /* SQL built-ins, types — IN-400 */
    --tok-op:    #b3aaff;   /* operators — VT-300 */
    --tok-var:   #f5f5f7;   /* variables, column names — fg */
    --tok-punct: #6e6e7a;   /* punctuation */
  }

  .dh-codeblock {
    background: var(--cb-bg);
    border: 1px solid var(--cb-border);
    border-radius: var(--r-sm);
    overflow: hidden;
    position: relative;
  }

  /* ── Header ─────────────────────────────────────────────── */
  .cb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: 10px var(--sp-4);
    background: var(--cb-header-bg);
    border-bottom: 1px solid var(--cb-border);
    flex-shrink: 0;
  }

  .cb-header-left {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
  }

  /* Language dot */
  .cb-lang-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .cb-lang-dot.sql  { background: #06bcc1; }
  .cb-lang-dot.js   { background: #ffc852; }
  .cb-lang-dot.py   { background: #4effb8; }
  .cb-lang-dot.ts   { background: #a0a3ff; }
  .cb-lang-dot.bash { background: #b3aaff; }

  .cb-lang {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: #a0a3ff;       /* EP-300, fixed */
    flex-shrink: 0;
  }

  .cb-filename {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #5a5a6a;       /* muted, fixed */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Copy button */
  .cb-copy {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--r-xs);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: #86868b;       /* fg-3 dark, fixed */
    cursor: pointer;
    flex-shrink: 0;
    transition:
      color 0.15s ease,
      background 0.15s ease,
      border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .cb-copy:hover {
    color: #f5f5f7;
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.18);
  }
  .cb-copy:focus-visible {
    outline: 2px solid #a865e1;
    outline-offset: 2px;
  }
  .cb-copy.is-copied {
    color: #4effb8;
    border-color: rgba(78, 255, 184, 0.30);
    background: rgba(78, 255, 184, 0.07);
  }
  .cb-copy svg { width: 13px; height: 13px; flex-shrink: 0; }
  .cb-check { display: none; }
  .cb-copy.is-copied .cb-icon { display: none; }
  .cb-copy.is-copied .cb-check { display: block; }

  /* ── Code body ────────────────────────────────────────────── */
  .cb-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Custom scrollbar — dark, minimal */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
  }
  .cb-scroll::-webkit-scrollbar { height: 5px; }
  .cb-scroll::-webkit-scrollbar-track { background: transparent; }
  .cb-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 3px; }

  .cb-pre {
    margin: 0;
    padding: var(--sp-5);
    font-family: var(--font-mono);
    font-size: 0.84375rem;   /* 13.5px */
    line-height: 1.75;
    white-space: pre;
    color: var(--cb-base);
    tab-size: 2;
    -moz-tab-size: 2;
    /* Don't wrap — horizontal scroll instead */
    word-break: normal;
    overflow-wrap: normal;
  }

  /* ── Line numbers variant ──────────────────────────────────── */
  .cb-pre.has-lines {
    counter-reset: cb-line;
    padding-left: 0;
  }
  .cb-pre.has-lines .cb-line {
    display: block;
    padding-left: var(--sp-5);
  }
  .cb-pre.has-lines .cb-line::before {
    counter-increment: cb-line;
    content: counter(cb-line);
    display: inline-block;
    width: 2.5em;
    text-align: right;
    margin-right: var(--sp-5);
    margin-left: calc(-1 * var(--sp-5));
    color: rgba(255, 255, 255, 0.18);
    user-select: none;
    pointer-events: none;
  }

  /* ── Syntax token colours ──────────────────────────────────── */
  .tok-kw    { color: var(--tok-kw);    }
  .tok-fn    { color: var(--tok-fn);    }
  .tok-str   { color: var(--tok-str);   }
  .tok-num   { color: var(--tok-num);   }
  .tok-cmt   { color: var(--tok-cmt); font-style: italic; }
  .tok-type  { color: var(--tok-type);  }
  .tok-op    { color: var(--tok-op);    }
  .tok-var   { color: var(--tok-var);   }
  .tok-punct { color: var(--tok-punct); }