/* Kodeditorn, körresultaten, visualiseringen av en körning, verktygen och kodlabbet. Kod visas alltid mörkt. */
:root {
  --code-bg: #131f24;
  --code-panel: #1c2b32;
  --code-line: #37464f;
  --code-ink: #e4edf2;
  --code-faint: #7f95a0;
  --code-font: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --gutter: 38px;
}
@media (prefers-color-scheme: dark) { :root { --code-bg: #0b1417; --code-panel: #162126; } }
code, .tile-text code { font-family: var(--code-font); }
.tk-comment { color: var(--code-faint); font-style: italic; }
.tk-string { color: #a5e36b; }
.tk-keyword { color: #cfa3ff; }
.tk-constant, .tk-number { color: #ffb454; }
.tk-builtin, .tk-call { color: #8fd8ff; }

/* Kodrader: radnumret ligger i marginalen, så att långa rader kan brytas utan att numren hamnar fel. */
.code-block, .code-mirror, .code-input { margin: 0; color: var(--code-ink); font-family: var(--code-font); font-size: 15px; font-weight: 500; line-height: 1.55; tab-size: 4; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; letter-spacing: 0; }
.code-block { padding: 12px 0; border-radius: 14px; background: var(--code-bg); }
.code-line { position: relative; min-height: 1.55em; padding: 0 10px 0 var(--gutter); }
.code-line::before { position: absolute; left: 0; width: calc(var(--gutter) - 12px); color: var(--code-faint); content: attr(data-n); font-size: 12px; line-height: 1.95; text-align: right; user-select: none; }
.code-line.is-active { background: rgba(255, 200, 0, 0.2); box-shadow: inset 3px 0 0 var(--gold); }
.code-line.is-previous { background: rgba(255, 255, 255, 0.06); }
.code-line.is-error { background: rgba(224, 62, 62, 0.3); box-shadow: inset 3px 0 0 var(--red-face); }
.ex-code { margin-bottom: 14px; }
.tiles--code .tile-text, .order--code .tile-text, .is-code { font-family: var(--code-font); font-size: 15px; font-weight: 500; white-space: pre-wrap; }

.code-editor { overflow: hidden; border-radius: 14px; background: var(--code-bg); }
.code-stage { position: relative; padding: 12px 0; }
.code-mirror { min-height: 7.75em; }
.code-input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 12px 10px 12px var(--gutter); overflow: hidden; border: 0; border-radius: 0; outline: none; background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: #ffffff; resize: none; appearance: none; }
.code-mirror, .code-input { font-size: 16px; }
.code-input::selection { background: rgba(143, 216, 255, 0.35); }
.code-editor:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.code-keys { display: flex; gap: 6px; padding: 8px; overflow-x: auto; border-top: 2px solid var(--code-line); background: var(--code-panel); scrollbar-width: none; }
.code-keys::-webkit-scrollbar { display: none; }
.is-readonly .code-keys { display: none; }
.code-key { flex: none; min-width: 44px; height: 44px; padding: 0 6px; border: 0; border-radius: 10px; background: var(--code-line); box-shadow: 0 2px 0 #000000; color: var(--code-ink); font-family: var(--code-font); font-size: 17px; font-weight: 700; }
.code-key:active { transform: translateY(2px); box-shadow: none; }
/* Med riktigt tangentbord och pekare behövs inte teckenraden. */
@media (hover: hover) and (pointer: fine) { .code-keys { display: none; } }

.code-ex { display: grid; gap: 12px; }
.code-part { display: contents; }
.code-note { color: var(--muted); font-size: 15px; }
.code-note code { margin-left: 6px; padding: 2px 8px; border-radius: 8px; background: var(--soft); color: var(--ink-strong); }
.code-status { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 15px; font-weight: 800; }
.code-spinner { width: 20px; height: 20px; border: 3px solid var(--line); border-top-color: var(--blue-face); border-radius: 50%; animation: code-spin 800ms linear infinite; }
@keyframes code-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .code-spinner { animation: none; } }
.code-hint { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--gold-soft); color: var(--gold-ink); font-size: 15px; font-weight: 700; }
.code-hint .icon { margin-top: 1px; }
.code-hint:focus { outline: none; }
.code-hint-btn { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 44px; color: var(--muted); font-size: 14px; }
.code-trace-btn { margin-top: 2px; }
.foot-actions .foot-trace { min-width: 0; padding: 0 14px; }
@media (max-width: 640px) { .foot-actions .foot-trace { padding: 4px 6px; letter-spacing: 0.03em; line-height: 1.15; } .foot-trace .icon { display: none; } }
.foot-inner.is-compact .verdict-answer, .foot-inner.is-compact .verdict-why, .foot-inner.is-compact .verdict-text, .foot-inner.is-compact .verdict-source { display: none; }
.verdict-code { margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--code-bg); color: var(--code-ink); font-family: var(--code-font); font-size: 14px; font-weight: 500; line-height: 1.5; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Körresultat */
.code-results { display: grid; gap: 12px; }
.code-output { overflow: hidden; border-radius: 14px; background: var(--code-bg); color: var(--code-ink); }
.code-output h3 { display: flex; align-items: center; gap: 6px; padding: 8px 12px 0; color: var(--code-faint); font-size: 13px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.code-output h3 .icon { width: 18px; height: 18px; }
.code-output pre { max-height: 240px; margin: 0; padding: 6px 12px 12px; overflow: auto; font-family: var(--code-font); font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.code-error { padding: 12px 14px; border: 2px solid var(--red-line); border-radius: 14px; background: var(--red-soft); color: var(--ink); font-size: 15px; }
.code-error h3 { color: var(--red-ink); font-size: 16px; font-weight: 900; }
.code-error-raw { margin: 2px 0 6px; color: var(--red-ink); font-family: var(--code-font); font-size: 14px; overflow-wrap: anywhere; }
.code-tests { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.code-test { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 2px solid var(--red-line); border-radius: 14px; font-size: 15px; }
.code-test.is-passed { border-color: var(--green-line); }
.code-test > div { min-width: 0; overflow-wrap: anywhere; }
.code-test code { font-size: 14px; font-weight: 700; }
.code-test p { margin-top: 2px; color: var(--muted); font-size: 14px; }
.code-test-mark { display: grid; flex: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--red-face); color: #ffffff; }
.code-test.is-passed .code-test-mark { background: var(--primary); }
.code-test-mark .icon { width: 15px; height: 15px; }

/* Körningen steg för steg */
.trace-view { display: grid; gap: 12px; min-width: 0; scroll-margin-top: 12px; }
.tv-code { max-height: 34dvh; overflow: auto; border-radius: 14px; background: var(--code-bg); }
.tv-controls { display: flex; align-items: center; gap: 8px; }
.tv-btn { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border: 2px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 3px 0 var(--line); color: var(--ink); font-size: 15px; font-weight: 900; }
.tv-btn:active { transform: translateY(3px); box-shadow: none; }
.tv-btn .icon { width: 22px; height: 22px; }
.tv-btn--play { border-color: var(--primary); background: var(--primary); box-shadow: 0 3px 0 var(--primary-shadow); color: #ffffff; }
.tv-scrub { display: grid; flex: 1; gap: 2px; min-width: 0; }
.tv-slider { width: 100%; height: 28px; margin: 0; accent-color: var(--primary); }
.tv-counter { color: var(--muted); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tv-caption { min-height: 1.45em; color: var(--ink-strong); font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.tv-test { display: block; color: var(--blue-ink); font-size: 13px; font-weight: 800; }
.tv-tabs { display: flex; gap: 8px; }
.tv-tab { flex: 1; min-height: 44px; border: 2px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--muted); font-size: 14px; font-weight: 800; }
.tv-tab[aria-pressed="true"] { border-color: var(--blue-line); background: var(--blue-soft); color: var(--blue-ink); }
.tv-board { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: 22px; min-height: 80px; padding: 12px; border: 2px solid var(--line); border-radius: 14px; }
.tv-board.is-tree { display: block; overflow-x: auto; }
/* Pilarna ligger över variablerna, där de bara går från pricken och åt höger, men under objekten, så att de aldrig korsar text där. */
.tv-frames, .tv-objects { position: relative; display: grid; gap: 10px; min-width: 0; }
.tv-objects { z-index: 2; }
.tv-frame { padding: 8px; border: 2px solid var(--line); border-radius: 12px; background: var(--panel); }
.tv-frame.is-active { border-color: var(--blue-line); background: var(--blue-soft); }
.tv-frame h4, .tv-object h4 { margin: 0 0 4px; color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: 0.04em; }
.tv-frame dl { display: grid; gap: 4px; margin: 0; }
.tv-var { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.tv-var dt { min-width: 0; color: var(--ink-strong); font-family: var(--code-font); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.tv-var dd { margin: 0; min-width: 0; }
.tv-value { display: inline-block; min-width: 26px; max-width: 100%; padding: 1px 6px; border: 2px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink-strong); font-family: var(--code-font); font-size: 14px; font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.tv-str { color: var(--green-ink); }
.tv-int, .tv-float { color: var(--hue-orange); }
.tv-bool, .tv-NoneType { color: var(--hue-purple); }
.tv-attr { border-color: transparent; background: none; color: var(--muted); }
.tv-ref { display: inline-grid; place-items: center; width: 28px; min-width: 28px; height: 26px; padding: 0; }
.tv-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--blue-face); }
.is-changed > .tv-value, .tv-value.is-changed { border-color: var(--gold); background: var(--gold-soft); animation: tv-flash 500ms ease-out; }
@keyframes tv-flash { from { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .is-changed > .tv-value, .tv-value.is-changed { animation: none; } }
.tv-empty { color: var(--muted); font-size: 13px; font-weight: 700; }
.tv-return { margin-top: 6px; color: var(--muted); font-size: 13px; font-weight: 800; }
.tv-object { padding: 8px; border: 2px solid var(--line); border-radius: 12px; background: var(--soft); }
.tv-text { color: var(--ink-strong); font-family: var(--code-font); font-size: 14px; overflow-wrap: anywhere; }
.tv-cells { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tv-cells li { display: grid; justify-items: center; }
.tv-cells small { color: var(--muted); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tv-pairs { display: grid; gap: 4px; }
/* Får raden inte plats hamnar värdet under nyckeln, med sin pil framför. */
.tv-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tv-pair-value { display: flex; align-items: center; gap: 4px; min-width: 0; }
.tv-arrow-text { color: var(--muted); font-weight: 900; }
.tv-arrows { position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; }
.tv-arrows path { fill: none; stroke: var(--blue-face); stroke-width: 2; }
.tv-arrows .tv-head { fill: var(--blue-face); stroke: none; }
.tv-tree, .tv-tree ul { margin: 0; padding: 0; list-style: none; }
.tv-tree ul { margin-left: 12px; padding-left: 14px; border-left: 2px solid var(--line); }
.tv-tree li { margin-top: 6px; }
.tv-call { display: inline-block; padding: 3px 8px; border: 2px solid var(--line); border-radius: 8px; color: var(--ink-strong); font-family: var(--code-font); font-size: 14px; white-space: nowrap; }
.tv-call b { color: var(--green-ink); font-weight: 700; }
.tv-call.is-active { border-color: var(--gold); background: var(--gold-soft); }

/* Interaktiva verktyg */
.code-widget { padding: 14px; border: 2px solid var(--line); border-radius: 16px; }
.code-widget > div > * + *, .code-widget .cw-view > * + * { margin-top: 12px; }
.cw-expression { color: var(--ink); font-size: 16px; font-weight: 800; }
.cw-expression code { padding: 2px 6px; border-radius: 8px; background: var(--code-bg); color: var(--code-ink); font-size: 15px; white-space: pre-wrap; }
.cw-expression .cw-result { background: var(--green-soft); color: var(--green-ink); font-weight: 700; }
.cw-note { color: var(--muted); font-size: 15px; }
.cw-stats { color: var(--muted); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cw-label { margin-top: 8px; color: var(--muted); font-size: 13px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.cw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cw-chip { min-width: 44px; min-height: 44px; padding: 0 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 2px 0 var(--line); color: var(--ink); font-size: 14px; font-weight: 800; }
.cw-chip[aria-pressed="true"] { border-color: var(--blue-line); background: var(--blue-soft); box-shadow: 0 2px 0 var(--blue-line); color: var(--blue-ink); }
.cw-cells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin: 10px 0; padding: 0; list-style: none; text-align: center; }
.cw-cells li { display: grid; gap: 2px; }
.cw-cells b { display: grid; place-items: center; height: 44px; border: 2px solid var(--line); border-radius: 10px; color: var(--ink-strong); font-family: var(--code-font); font-size: 18px; }
.cw-cells .is-on b { border-color: var(--green-line); background: var(--green-soft); color: var(--green-ink); }
.cw-cells small { color: var(--muted); font-family: var(--code-font); font-size: 13px; }
.cw-cells .cw-negative { color: var(--muted); }
.cw-slider { display: grid; grid-template-columns: 56px minmax(0, 1fr) 32px; align-items: center; gap: 8px; min-height: 44px; color: var(--muted); font-size: 14px; font-weight: 800; }
.cw-slider input { width: 100%; height: 28px; accent-color: var(--primary); }
.cw-slider output { color: var(--ink-strong); font-family: var(--code-font); font-size: 15px; text-align: right; }
.cw-line { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); margin: 8px 0; padding: 0; list-style: none; text-align: center; }
.cw-line span { display: block; width: 14px; max-width: 80%; height: 14px; margin: 0 auto 2px; border-radius: 50%; background: var(--line); }
.cw-line .is-on span { background: var(--primary); box-shadow: 0 0 0 3px var(--green-soft); }
.cw-line .is-stop span { background: var(--red-face); }
.cw-line small { color: var(--muted); font-family: var(--code-font); font-size: 11px; letter-spacing: -0.04em; }
.cw-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cw-toggle { min-height: 48px; border: 2px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 3px 0 var(--line); color: var(--muted); font-size: 15px; font-weight: 800; }
.cw-toggle.is-on { border-color: var(--green-line); background: var(--green-soft); box-shadow: 0 3px 0 var(--green-line); color: var(--green-ink); }
.cw-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cw-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 14px; }
.cw-rows li.is-on { border-color: var(--green-line); background: var(--green-soft); }
.cw-rows code { color: var(--ink-strong); font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.cw-rows b { color: var(--ink-strong); font-family: var(--code-font); font-size: 15px; text-align: right; }
.cw-rows small { grid-column: 1 / -1; color: var(--muted); font-size: 14px; }
.cw-venn svg { display: block; width: 100%; max-width: 340px; margin: 0 auto; }
.cw-venn text { fill: var(--ink-strong); font-family: var(--code-font); font-size: 17px; font-weight: 700; text-anchor: middle; }
.cw-fill { fill: var(--green); fill-opacity: 0.55; transition: opacity 180ms; }
.cw-edge { fill: none; stroke: var(--ink); stroke-width: 2; }
.cw-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 320px; }
.cw-cell { height: 52px; border: 2px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink-strong); font-family: var(--code-font); font-size: 16px; font-weight: 700; }
.cw-cell.is-row, .cw-cell.is-column { border-color: var(--blue-line); background: var(--blue-soft); }
.cw-cell.is-on { border-color: var(--primary); background: var(--primary); color: #ffffff; }
.cw-bars { display: flex; align-items: flex-end; gap: 4px; height: 170px; padding-top: 6px; }
.cw-bar { display: grid; flex: 1; place-items: end center; min-width: 0; padding-bottom: 4px; border-radius: 8px 8px 0 0; background: var(--blue-face); color: #ffffff; font-family: var(--code-font); font-size: 14px; font-weight: 700; transition: height 150ms; }
.cw-bar.is-on { background: var(--orange); color: #3a2400; }
.cw-actions { display: flex; gap: 8px; }

/* Kodlabbet */
.code-lab { display: grid; gap: 14px; max-width: 720px; margin: 0 auto; padding: 20px max(16px, env(safe-area-inset-right)) 120px max(16px, env(safe-area-inset-left)); }
.code-lab > * { min-width: 0; }
.code-lab h1 { color: var(--ink-strong); font-size: clamp(25px, 6vw, 32px); font-weight: 900; line-height: 1.15; }
.code-lab h2 { margin-top: 14px; color: var(--ink-strong); font-size: 21px; font-weight: 900; }
.code-lab-intro { color: var(--muted); font-size: 16px; }
.lab-examples { margin: 0; flex-wrap: nowrap; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
.lab-examples::-webkit-scrollbar { display: none; }
.lab-examples .cw-chip { flex: none; }
.lab-inputs { width: 100%; padding: 10px 12px; border: 2px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--ink-strong); font-family: var(--code-font); font-size: 16px; resize: vertical; }
.code-lab .code-mirror .code-line { scroll-margin-block: calc(var(--topbar-h) + 12px) 96px; }
.lab-actions { display: flex; flex-wrap: wrap; }
.lab-actions .btn[aria-disabled="true"] { --face: var(--line); --shadow: var(--line-strong); --text: var(--faint); cursor: default; }
.lab-reset { min-height: 44px; color: var(--muted); font-size: 14px; }
.lab-results { display: grid; gap: 14px; scroll-margin-top: calc(var(--topbar-h) + 12px); }
.lab-tools { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lab-tools li { display: grid; gap: 10px; }
.lab-tool { display: grid; gap: 2px; width: 100%; padding: 12px 14px; border: 2px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 3px 0 var(--line); color: var(--ink); font-size: 15px; text-align: left; }
.lab-tool strong { color: var(--ink-strong); font-size: 17px; font-weight: 900; }
.lab-tool span { color: var(--muted); }
.lab-tool.is-open { border-color: var(--blue-line); background: var(--blue-soft); box-shadow: 0 3px 0 var(--blue-line); }
@media (min-width: 641px) { .code-lab { padding-bottom: 64px; } }