/* /css/editor.css: the code-task box as the page first paints it (§6.7): heading and frame only.
   Everything the code UI builds (head, editor, hints, test table, console) is in /css/code-ui.css, which
   /js/core/editor.js loads with itself, so it costs nothing before a reader reaches code (§8.2, SPEC §10.12).
   Purple (--c-you) marks the reader's own code throughout. */

.code-task {
  margin: var(--s-7) 0;
  padding: var(--s-5);
  border: 1px solid color-mix(in srgb, var(--c-you) 30%, var(--rule));
  border-top: 4px solid var(--c-you);
  border-radius: var(--r-m) var(--r-m) var(--r-l) var(--r-l);
  background: var(--surface);
  box-shadow: var(--shadow);
  clear: both;
  --flow: 1em;
}
@media (max-width: 699px) { .code-task { padding: var(--s-4) var(--s-3); } }
.code-task > h3 { font-size: 1.35rem; }
.code-task > h3 code { font-size: .85em; background: var(--tint-you); color: var(--c-you); }
.code-task.is-passed { border-top-color: var(--c-ok); }