/* Native code blocks — fixed dark panel in light & dark site themes */

/* Preformatted output samples — plain panel, no Java/Run chrome */
.jil-content pre.wp-block-preformatted,
.jil-content .wp-block-preformatted{
  width:100%;max-width:100%;display:block;box-sizing:border-box;
  background:var(--jil-panel);border:1px solid var(--jil-line);border-radius:10px;
  padding:14px 16px;margin:16px 0;overflow-x:auto;font-family:var(--jil-mono);
  font-size:13.5px;line-height:1.65;color:var(--jil-text);white-space:pre-wrap
}

/* Source code blocks (before JS wrap) */
.jil-content pre.wp-block-code,
.jil-content .wp-block-code{
  width:100%;max-width:100%;display:block;box-sizing:border-box;
  background:var(--jil-panel);border:1px solid var(--jil-line);border-radius:10px;
  padding:14px 16px;margin:16px 0;overflow-x:auto;font-family:var(--jil-mono);
  font-size:13.5px;line-height:1.65;color:var(--jil-muted);white-space:pre-wrap
}

.jil-codeblock{
  --cb-bg:#161b22;
  --cb-border:#30363d;
  --cb-head:#0d1117;
  --cb-text:#e6edf3;
  --cb-muted:#8b949e;
  --cb-accent:#58a6ff;
  position:relative;margin:20px 0;border:1px solid var(--cb-border);border-radius:14px;
  overflow:hidden;background:var(--cb-bg);max-width:100%;min-width:0;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset
}
.jil-code-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;background:var(--cb-head);border-bottom:1px solid var(--cb-border)
}
.jil-code-label{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--jil-mono);font-size:12px;font-weight:600;color:var(--cb-text)
}
.jil-code-label svg{color:var(--cb-accent);flex-shrink:0}
.jil-codeblock .jil-copy{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border:1px solid var(--cb-border);border-radius:8px;
  background:transparent;color:var(--cb-muted);cursor:pointer;transition:.15s
}
.jil-codeblock .jil-copy:hover{color:var(--cb-text);border-color:var(--cb-muted)}
.jil-codeblock .jil-copy.is-copied{color:#3fb950;border-color:#3fb950}
.jil-codeblock pre{
  margin:0;padding:16px 18px 16px 22px;overflow-x:auto;overflow-y:hidden;
  font-family:var(--jil-mono);font-size:13.5px;line-height:1.7;
  background:transparent;border:none;border-radius:0;color:var(--cb-text);
  white-space:pre;word-wrap:normal;overflow-wrap:normal;word-break:normal;
  max-width:100%;box-sizing:border-box;
  -webkit-overflow-scrolling:touch;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%
}
.jil-codeblock code{
  font-family:inherit;font-size:inherit;line-height:inherit;background:none;padding:0;border:none;color:inherit;
  white-space:pre;display:block;width:max-content;min-width:100%;
  word-wrap:normal;overflow-wrap:normal;word-break:normal;tab-size:4;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%
}
/*
 * Kill double-box: theme styles .wp-block-code with its own border/bg,
 * but JS also wraps it in .jil-codeblock — only the outer shell should show.
 */
.jil-codeblock .wp-block-code,
.jil-codeblock pre.wp-block-code,
.jil-codeblock pre,
.jil-content .jil-codeblock .wp-block-code,
.jil-content .jil-codeblock pre.wp-block-code,
.jil-post .jil-content .jil-codeblock .wp-block-code,
.jil-post .jil-content .jil-codeblock pre.wp-block-code,
.jil-iq-answer .jil-codeblock .wp-block-code,
.jil-iq-answer .jil-codeblock pre{
  background:transparent!important;
  border:none!important;
  border-radius:0!important;
  box-shadow:none!important;
  margin:0!important;
  width:100%!important;
  max-width:100%!important;
  color:var(--cb-text)!important;
  white-space:pre!important;
  word-break:normal!important;
  overflow-wrap:normal!important
}
.jil-content .jil-codeblock .wp-block-code code,
.jil-post .jil-content .jil-codeblock .wp-block-code code,
.jil-iq-answer .jil-codeblock code{
  background:none!important;border:none!important;padding:0!important;
  color:inherit!important;font:inherit;white-space:pre!important;
  word-break:normal!important;overflow-wrap:normal!important
}
/* Keep left padding on <pre> inside IQ answers (was zeroed and text hugged the edge). */
.jil-iq-answer .jil-codeblock pre,
.jil-post .jil-content .jil-iq-answer .jil-codeblock pre{
  background:none!important;border:none!important;
  padding:16px 18px 16px 22px!important;
  color:inherit!important;font:inherit;white-space:pre!important;
  word-break:normal!important;overflow-wrap:normal!important
}
.jil-code-foot{
  display:flex;align-items:center;padding:10px 14px;
  border-top:1px solid var(--cb-border);background:var(--cb-head)
}
.jil-code-run{
  font-family:var(--jil-mono);font-size:12px;font-weight:600;
  color:#0d1117;background:var(--jil-amber);border:none;border-radius:8px;
  padding:8px 14px;cursor:pointer;transition:.15s
}
.jil-code-run:hover:not(:disabled){filter:brightness(1.06)}
.jil-code-run:disabled{opacity:.65;cursor:wait}
.jil-code-output{
  padding:12px 14px;font-family:var(--jil-mono);font-size:12.5px;line-height:1.55;
  border-top:1px solid var(--cb-border);background:#0d1117;color:var(--cb-muted);
  white-space:pre-wrap
}
.jil-code-output.is-error{color:#f85149}

/* Prism tokens — GitHub-dark style (same in light/dark site theme) */
.jil-codeblock .token.comment,.jil-codeblock .token.prolog,.jil-codeblock .token.doctype,.jil-codeblock .token.cdata{color:#8b949e}
.jil-codeblock .token.punctuation{color:#c9d1d9}
.jil-codeblock .token.property,.jil-codeblock .token.tag,.jil-codeblock .token.boolean,.jil-codeblock .token.number,.jil-codeblock .token.constant,.jil-codeblock .token.symbol{color:#ffa657}
.jil-codeblock .token.selector,.jil-codeblock .token.attr-name,.jil-codeblock .token.string,.jil-codeblock .token.char,.jil-codeblock .token.builtin,.jil-codeblock .token.inserted{color:#a5d6ff}
.jil-codeblock .token.operator,.jil-codeblock .token.entity,.jil-codeblock .token.url,.jil-codeblock .token.variable{color:#ff7b72}
.jil-codeblock .token.atrule,.jil-codeblock .token.attr-value,.jil-codeblock .token.function,.jil-codeblock .token.class-name{color:#d2a8ff}
.jil-codeblock .token.keyword{color:#ff7b72}
.jil-codeblock .token.regex,.jil-codeblock .token.important{color:#f0883e}
.jil-codeblock .token.deleted{color:#ffdcd7}

.jil-iq-answer .jil-codeblock{margin:14px 0}

@media (max-width:640px){
  .jil-codeblock{margin:12px 0;border-radius:12px}
  .jil-code-head{padding:8px 10px}
  .jil-code-label{font-size:11px}
  .jil-codeblock pre,
  .jil-codeblock code,
  .jil-content .jil-codeblock pre,
  .jil-content .jil-codeblock code,
  .jil-post .jil-content .jil-codeblock pre,
  .jil-post .jil-content .jil-codeblock code,
  .jil-content pre.wp-block-code,
  .jil-content .wp-block-code{
    /* Explicit size + lock — iOS otherwise bumps sub-16px mono type */
    font-size:12px!important;
    line-height:1.55!important;
    -webkit-text-size-adjust:100%!important;
    text-size-adjust:100%!important
  }
  .jil-codeblock pre{
    padding:12px 12px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin
  }
  .jil-code-foot{padding:8px 10px}
  .jil-codeblock .jil-copy{width:30px;height:30px}
  .jil-iq-answer .jil-codeblock{margin:10px 0}
}

/* Extra lock for iPhone / iPad Safari only */
@supports (-webkit-touch-callout:none){
  .jil-codeblock pre,
  .jil-codeblock code,
  .jil-content pre.wp-block-code,
  .jil-content .wp-block-code,
  .jil-content .wp-block-code code{
    -webkit-text-size-adjust:100%!important;
    text-size-adjust:100%!important
  }
}