/* Code colours for lessons and articles (static/js/code-highlight.js).
 * Colours are tuned for the dark code panel (#2B211A) and checked for
 * contrast; inline code and program output get their own look so code is
 * easy to tell apart from the text around it. */

/* inline code inside sentences: a tinted chip, not plain text */
.lesson-doc :not(pre) > code {
  font-size: .9em; padding: .12em .4em; border-radius: 6px; white-space: break-spaces;
  color: #9a3412; background: #fff1e6; border: 1px solid #fcd9bd;
}
.lesson-doc .tip :not(pre) > code, .lesson-doc .expect :not(pre) > code { background: rgba(255,255,255,.7); }

/* code panels: a little more room and a visible edge */
.lesson-doc pre:not(.mono) { border-left: 4px solid #f59e0b; line-height: 1.6; }
.tutorial-body pre { border-left: 4px solid #f59e0b; }

/* syntax colours */
.hljs-keyword, .hljs-literal, .hljs-selector-tag { color: #ff8fb0; font-weight: 600; }
.hljs-string, .hljs-regexp, .hljs-template-variable { color: #ffd38a; }
.hljs-number, .hljs-symbol { color: #b8e994; }
.hljs-comment, .hljs-quote { color: #b3a395; font-style: italic; }
.hljs-title, .hljs-title.function_, .hljs-section { color: #7fd4ff; }
.hljs-title.class_ { color: #ffcf6e; }
.hljs-built_in, .hljs-type { color: #8de6d4; }
.hljs-params, .hljs-subst, .hljs-variable { color: #f3ece3; }
.hljs-meta, .hljs-meta .hljs-keyword { color: #d5b4ff; }
.hljs-attr, .hljs-attribute, .hljs-property { color: #8fd0ff; }
.hljs-name, .hljs-tag { color: #ff9ea8; }
.hljs-operator { color: #f0c8a8; }

/* program output: light panel, green text, labelled */
.lesson-doc pre.is-output, .tutorial-body pre.is-output {
  position: relative; background: #f0f8f3 !important; color: #0e5c40 !important;
  border: 1px solid #c6e6d3; border-left: 4px solid #16a34a; padding-top: 26px !important;
}
.lesson-doc pre.is-output::before, .tutorial-body pre.is-output::before {
  content: "OUTPUT"; position: absolute; top: 7px; left: 14px;
  font: 700 10px/1 Inter, system-ui, sans-serif; letter-spacing: .08em; color: #15803d;
}
.lesson-doc pre.is-output code, .tutorial-body pre.is-output code { color: inherit; }