/* /css/code-ui.css: the code editor, the code-task panel, the test table and the console (§6.7).
   Loaded by /js/core/editor.js (inserted right after /css/editor.css, so the cascade order is unchanged) before
   any of it renders; the Math Toolkit links it directly for its static test-table example. Split out of editor.css
   for the §8.2 shared-CSS budget (SPEC §10.12). Purple (--c-you) marks the reader's own code throughout. */

.ct-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-family: var(--font-sans); }
.ct-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-m);
  background: var(--tint-you);
  color: var(--c-you);
}
.ct-icon .icon { width: 26px; height: 26px; stroke-width: 1.6; }
.ct-sig { font-size: .95rem; background: none; padding: 0; color: var(--ink); font-weight: 600; }
.ct-chip { margin-left: auto; }
.ct-status.is-yours { color: var(--c-ok); border-color: color-mix(in srgb, var(--c-ok) 45%, var(--rule)); background: var(--tint-ok); }
.ct-status.is-not-yet { color: var(--ink-muted); }
.ct-bonus { color: var(--c-light-text); border-color: color-mix(in srgb, var(--c-light) 45%, var(--rule)); }
.ct-summary { font-family: var(--font-sans); font-size: .88rem; color: var(--ink-muted); }
.ct-help { font-family: var(--font-sans); font-size: .78rem; color: var(--ink-muted); }
.ct-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.ct-kbd { margin-left: .3em; font-size: .7rem; background: color-mix(in srgb, var(--on-accent) 18%, transparent); border-color: transparent; color: inherit; }
.code-task .btn.primary { background: var(--c-you); border-color: var(--c-you); }
.code-task .btn.primary:hover { background: color-mix(in srgb, var(--c-you) 85%, var(--ink)); }
.code-task.is-running .ct-run { position: relative; }
.code-task.is-running .ct-run .icon { animation: ct-spin 900ms linear infinite; }
@keyframes ct-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- the editor */

.code-editor { --ce-rows: 8; --ce-lh: 1.55em; --ce-pad: 12px; font-size: .84rem; }
.ce-frame {
  display: flex;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-m);
  background: var(--surface-2);
  overflow: hidden;
  transition: border-color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease);
}
.code-editor.has-focus .ce-frame { border-color: var(--c-you); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-you) 22%, transparent); }
.ce-gutter {
  flex: none;
  min-width: 3.1em;
  padding: var(--ce-pad) .6em var(--ce-pad) .4em;
  overflow: hidden;
  height: calc(var(--ce-rows) * var(--ce-lh) + 2 * var(--ce-pad));
  text-align: right;
  font-family: var(--font-mono);
  line-height: var(--ce-lh);
  color: var(--ink-muted);
  opacity: .75;
  background: color-mix(in srgb, var(--surface-2) 70%, var(--rule));
  border-right: 1px solid var(--rule);
  user-select: none;
  font-variant-numeric: tabular-nums;
}
.ce-num { display: block; }
.ce-num.is-error { color: var(--c-bad); opacity: 1; font-weight: 700; }
.ce-body { position: relative; flex: 1; min-width: 0; height: calc(var(--ce-rows) * var(--ce-lh) + 2 * var(--ce-pad)); }
.ce-highlight, .ce-input {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: var(--ce-pad) 14px;
  border: 0;
  font-family: var(--font-mono);
  font-size: 1em;
  line-height: var(--ce-lh);
  letter-spacing: 0;
  tab-size: 2;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}
.ce-highlight { overflow: hidden; pointer-events: none; color: var(--ink); background: transparent; }
.ce-code { display: block; min-width: max-content; background: none; padding: 0; font-size: 1em; }
.ce-line { display: block; min-height: var(--ce-lh); padding-right: 14px; }
.ce-line.is-error { background: color-mix(in srgb, var(--c-bad) 10%, transparent); box-shadow: inset 3px 0 0 var(--c-bad); margin: 0 -14px; padding: 0 14px; }
.ce-input {
  width: 100%;
  height: 100%;
  resize: none;
  overflow: auto;
  background: transparent;
  color: transparent;
  caret-color: var(--ink);
  outline: none;
  -webkit-text-fill-color: transparent;
  scrollbar-width: thin;
}
/* Horizontal overflow cue: a soft fade at a clipped edge (toggled by editor.js), so long lines visibly continue. */
.ce-body::before, .ce-body::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-ui) var(--ease);
  z-index: 1;
}
.ce-body::before { left: 0; background: linear-gradient(to right, var(--surface-2), transparent); }
.ce-body::after { right: 0; background: linear-gradient(to left, var(--surface-2), transparent); }
.code-editor.has-more-left .ce-body::before, .code-editor.has-more-right .ce-body::after { opacity: 1; }
/* Phones: soft wrap (editor.js .is-wrapping below 480px); gutter numbers take their lines' wrapped heights. */
.code-editor.is-wrapping .ce-highlight, .code-editor.is-wrapping .ce-input { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden; }
.code-editor.is-wrapping .ce-code { min-width: 0; }
.code-editor.is-wrapping .ce-line { padding-right: 0; }
.code-editor.is-wrapping .ce-num { box-sizing: border-box; }
.code-editor.is-wrapping .ce-gutter { min-width: 2.4em; padding-left: .2em; padding-right: .45em; }
@media (hover: none) and (pointer: coarse) { .ce-help-main { display: none; } }
.ce-input::selection { background: color-mix(in srgb, var(--c-you) 28%, transparent); -webkit-text-fill-color: transparent; }
.code-editor.is-readonly .ce-frame { opacity: .85; }
.ce-help { margin-top: var(--s-2); font-family: var(--font-sans); font-size: .72rem; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: .3em var(--s-3); }
.ce-help kbd { font-size: .92em; }
.ce-help-esc { display: none; color: var(--c-you); font-weight: 650; }
.code-editor.is-esc .ce-help-esc { display: inline; }

/* Syntax colors: quiet, readable in both themes. */
.tk-com { color: var(--ink-muted); font-style: italic; }
.tk-str { color: var(--c-ok); }
.tk-num { color: var(--c-light-text); }
.tk-kw { color: var(--c-you); font-weight: 600; }
.tk-lit { color: var(--c-light-text); font-weight: 600; }
.tk-builtin { color: var(--c-inv); }
.tk-fn { color: var(--c-lab); }
.tk-prop { color: var(--ink); }
.tk-punct { color: var(--ink-muted); }

/* Static, highlighted source (reference solution) */
.ce-static {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-m);
  font-size: .82rem;
  line-height: 1.55;
  overflow-x: auto;
}
.ce-static .ce-line { padding-right: 0; }

/* ---------------------------------------------------------------- hints, predictions, errors */

.ct-hints { padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.ct-hints:empty { display: none; }
.ct-hints li {
  margin: 0;
  padding: var(--s-2) var(--s-4);
  border-left: 3px solid var(--c-light);
  background: var(--surface-2);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  font-family: var(--font-sans);
  font-size: .85rem;
}
.ct-hint-n { font-weight: 700; color: var(--c-light-text); }
.ct-predict { font-family: var(--font-sans); font-size: .82rem; }
.ct-predict > summary { color: var(--ink-muted); min-height: 32px; display: inline-flex; align-items: center; gap: .4em; text-decoration: underline; text-underline-offset: .18em; }
.ct-optional { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; border: 1px solid var(--rule); border-radius: 999px; padding: 0 .5em; text-decoration: none; }
.ct-pred-list { list-style: none; padding: 0; display: grid; gap: var(--s-1); margin-top: var(--s-2); }
.ct-pred-list li { display: flex; gap: .5em; align-items: flex-start; margin: 0; }
.ct-pred { margin-top: .25em; accent-color: var(--c-you); }
.ct-pred-verdict.is-right { color: var(--c-ok); font-weight: 600; }
.ct-pred-verdict.is-wrong { color: var(--c-bad); font-weight: 600; }
.ct-error {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  border: 1px solid color-mix(in srgb, var(--c-bad) 35%, var(--rule));
  background: var(--tint-bad);
  border-radius: var(--r-m);
  font-family: var(--font-sans);
  font-size: .86rem;
}
.ct-error .icon { color: var(--c-bad); width: 1.4em; height: 1.4em; margin-top: .05em; }
.ct-results-head { font-family: var(--font-sans); font-size: .85rem; font-weight: 650; }
.ct-results-head:empty { display: none; }

/* ---------------------------------------------------------------- the test table */

.ct-tests { width: 100%; font-size: .78rem; }
.ct-tests th, .ct-tests td { padding: .5em .45em; }
/* Code tokens never break mid-number or mid-name: values wrap only at their own spaces (after a comma, or in
   "refuses (RangeError)"); .table-scroll scrolls the table if one token is still too long. */
.ct-tests code { background: none; padding: 0; font-size: .86em; overflow-wrap: normal; word-break: normal; }
.ct-tests .ct-label { font-weight: 500; min-width: 8.5em; white-space: normal; }
/* long values may break anywhere, so Got and Result stay inside the card */
.ct-tests td:is([data-label="Input"], [data-label="Expected"], [data-label="Got"]) code { overflow-wrap: anywhere; }
@media (max-width: 759px) {
  .ct-tests thead { display: none; }
  .ct-tests, .ct-tests tbody { display: block; }
  .ct-tests tr { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s-3); padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--rule); }
  .ct-tests th, .ct-tests td { border: 0; padding: 0; max-width: none; }
  .ct-tests .ct-label { grid-column: 1 / -1; margin-bottom: var(--s-1); }
  .ct-tests td::before { content: attr(data-label); color: var(--ink-muted); font-size: .9em; margin-right: var(--s-2); }
  .ct-tests td { grid-column: 1 / -1; }
  .ct-tests td code { white-space: normal; overflow-wrap: break-word; }
  /* Before the first run, a phone shows each test as its sentence, input and expected value only. */
  .ct-tests tr.is-idle td[data-label="Got"], .ct-tests tr.is-idle td[data-label="Result"] { display: none; }
}
.ct-note { display: block; margin-top: .25em; color: var(--c-bad); font-size: .92em; }
.ct-tests tr.is-fail { background: color-mix(in srgb, var(--tint-bad) 60%, transparent); }
.ct-tests tr.is-pass .ct-label { color: var(--ink); }
.ct-res { display: inline-flex; align-items: center; gap: .3em; font-weight: 700; white-space: nowrap; }
.ct-res .icon { stroke-width: 2.4; }
.ct-res.is-pass { color: var(--c-ok); }
.ct-res.is-fail { color: var(--c-bad); }
.ct-res.is-idle { color: var(--ink-muted); font-weight: 500; }
.ct-badge { display: flex; gap: .5em; align-items: center; font-family: var(--font-sans); font-size: .85rem; color: var(--c-inv); font-weight: 650; }

/* ---------------------------------------------------------------- console, wrong universe, solution */

.ct-console { font-family: var(--font-sans); font-size: .8rem; }
.ct-console > summary { color: var(--ink-muted); min-height: 32px; display: inline-flex; align-items: center; }
.ct-console-out {
  margin-top: var(--s-2);
  max-height: 14em;
  overflow: auto;
  padding: var(--s-3) var(--s-4);
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-m);
  font-size: .78rem;
  line-height: 1.5;
}
.ct-after:empty { display: none; }
.ct-after { display: grid; gap: var(--s-3); }
.ct-wrong-box { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); border: 1.5px dashed var(--c-you); border-radius: var(--r-m); background: var(--tint-you); }
.ct-wrong-box .btn { justify-self: start; }
.ct-note-box { display: flex; gap: .5em; align-items: flex-start; font-family: var(--font-sans); font-size: .85rem; }
.ct-solution { display: grid; gap: var(--s-3); padding: var(--s-4); border: 1px solid color-mix(in srgb, var(--c-inv) 35%, var(--rule)); border-radius: var(--r-m); background: var(--tint-inv); }
.ct-solution-title { display: flex; gap: .5em; align-items: center; font-family: var(--font-sans); font-weight: 650; font-size: .85rem; color: var(--c-inv); }