/* Code panel (nc/code). Colours come from the shell tokens (--nc-*); the fallbacks only matter when
   nc_viewer.css is absent. Syntax colours are local (--ncc-*) with a dark set under
   :root[data-theme="dark"]. Motion words (G0/G1/G2/G3) and gutter markers use the 3D motion colours
   (nc/model MOTION_COLORS_BY_THEME), which the module sets on the panel as --ncc-c-rapid/-cut/-arcmove;
   the words mix them a little toward the text colour so they stay >= 4.5:1 on every line band.
   The playback line uses the shared "where the machine is now" colour (nc/model PLAYBACK_COLORS),
   set by the module as --ncc-play-fill/-outline.
   Line bands never stack (readability round RU-05): a line shows at most one fill (selection or the
   op band); the playback line adds only a 3px bar, a filled gutter cell with ▶ and a bold number. */

.nc-code-panel {
  --ncc-bg: var(--nc-panel, #ffffff);
  --ncc-bg-2: var(--nc-panel-2, #f5f7fa);
  --ncc-border: var(--nc-border, #d8e0e9);
  --ncc-border-strong: var(--nc-border-strong, #8a96a8);
  --ncc-text: var(--nc-text, #172033);
  --ncc-dim: var(--nc-text-dim, #566377);
  --ncc-accent: var(--nc-accent, #0d73d9);
  --ncc-warning: var(--nc-warning, #9a5a00);
  --ncc-danger: var(--nc-danger, #d0303c);
  --ncc-info: var(--nc-accent, #0d73d9);
  --ncc-font: var(--nc-mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "D2Coding", monospace);
  --ncc-fs: var(--nc-fs-sm, 12px);
  --ncc-lh: 18px;
  --ncc-gutter-w: 48px;
  --ncc-gdiag-w: 14px;
  --ncc-op: #1f5fd1;

  /* Selected line: accent fill with thin edges. Playback line: a bar in the playback colour. */
  --ncc-sel-bg: color-mix(in srgb, var(--ncc-accent) 14%, transparent);
  --ncc-sel-edge: color-mix(in srgb, var(--ncc-accent) 70%, transparent);
  --ncc-play-fill: #f5b700;
  --ncc-play-outline: #111827;
  --ncc-op-mix: 9%;
  --ncc-motion-mix: 80%;
  --ncc-flash-mix: 55%;
  /* Search hits: a light fill plus an edge, so syntax colours keep >= 4.5:1 on a hit too. */
  --ncc-hit-bg: rgb(250 204 21 / 0.35);
  --ncc-hit-edge: rgb(202 138 4 / 0.65);
  --ncc-hit-cur-bg: #c2410c;
  --ncc-hit-cur-fg: #ffffff;

  /* Motion colours (overridden from nc/model by the module) */
  --ncc-c-rapid: #6b7280;
  --ncc-c-cut: #1f5fd1;
  --ncc-c-arcmove: #7a3ac9;
  /* G-code */
  --ncc-c-lno: #556276;
  --ncc-c-g: var(--ncc-text);
  --ncc-c-m: #a21caf;
  --ncc-c-axis: #0e6d66;
  --ncc-c-arc: #6d28d9;
  --ncc-c-feed: #9d4808;
  --ncc-c-tool: #be123c;
  --ncc-c-par: #436c0d;
  --ncc-c-prog: #7e22ce;
  --ncc-c-com: #5b616d;
  --ncc-c-pct: #bd1e1e;
  --ncc-c-num: #03669d;
  --ncc-c-var: #ad3a0b;
  --ncc-c-kw: #6d28d9;
  --ncc-c-op: #5b616d;
  --ncc-c-word: #374151;
  /* MPR */
  --ncc-c-sec: #bf1d1d;
  --ncc-c-cont: #ad3a0b;
  --ncc-c-mac: #1d4ed8;
  --ncc-c-macn: #6d28d9;
  --ncc-c-el: #0d6a83;
  --ncc-c-kind: #ba185b;
  --ncc-c-key: #0e6d66;
  --ncc-c-dkey: #556276;
  --ncc-c-str: #8b5506;
  /* XML */
  --ncc-c-tag: #1d4ed8;
  --ncc-c-tagp: #5b616d;
  --ncc-c-attr: #7e22ce;
  --ncc-c-aval: #046e50;
  --ncc-c-text: var(--ncc-text);
  --ncc-c-ent: #ad3a0b;
  --ncc-c-decl: #5b616d;

  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ncc-bg);
  color: var(--ncc-text);
  color-scheme: light;
}

:root[data-theme="dark"] .nc-code-panel {
  --ncc-bg: var(--nc-panel, #141a22);
  --ncc-bg-2: var(--nc-panel-2, #19202a);
  --ncc-border: var(--nc-border, #29323e);
  --ncc-border-strong: var(--nc-border-strong, #5d6b7e);
  --ncc-text: var(--nc-text, #e1e7ef);
  --ncc-dim: var(--nc-text-dim, #8e9aab);
  --ncc-accent: var(--nc-accent, #3d95f2);
  --ncc-warning: var(--nc-warning, #f0b03c);
  --ncc-danger: var(--nc-danger, #f06a74);
  --ncc-info: var(--nc-accent, #3d95f2);
  --ncc-op: #6ea8ff;

  --ncc-sel-bg: color-mix(in srgb, var(--ncc-accent) 22%, transparent);
  --ncc-sel-edge: color-mix(in srgb, var(--ncc-accent) 80%, transparent);
  --ncc-play-fill: #ffd23f;
  --ncc-play-outline: #111827;
  --ncc-op-mix: 15%;
  --ncc-motion-mix: 72%;
  --ncc-flash-mix: 40%;
  --ncc-hit-bg: rgb(90 68 0 / 0.55);
  --ncc-hit-edge: rgb(250 204 21 / 0.7);
  --ncc-hit-cur-bg: #fb923c;
  --ncc-hit-cur-fg: #111827;

  --ncc-c-rapid: #8b95a7;
  --ncc-c-cut: #6ea8ff;
  --ncc-c-arcmove: #b894ff;
  --ncc-c-lno: #a3adbb;
  --ncc-c-m: #f0abfc;
  --ncc-c-axis: #5eead4;
  --ncc-c-arc: #c4b5fd;
  --ncc-c-feed: #fbbf24;
  --ncc-c-tool: #fda4af;
  --ncc-c-par: #bef264;
  --ncc-c-prog: #d8b4fe;
  --ncc-c-com: #a5acba;
  --ncc-c-pct: #f98c8c;
  --ncc-c-num: #7dd3fc;
  --ncc-c-var: #fdba74;
  --ncc-c-kw: #c4b5fd;
  --ncc-c-op: #a5acba;
  --ncc-c-word: #d1d5db;
  --ncc-c-sec: #f98c8c;
  --ncc-c-cont: #fdba74;
  --ncc-c-mac: #93c5fd;
  --ncc-c-macn: #c4b5fd;
  --ncc-c-el: #67e8f9;
  --ncc-c-kind: #f9a8d4;
  --ncc-c-key: #5eead4;
  --ncc-c-dkey: #9facbf;
  --ncc-c-str: #fcd34d;
  --ncc-c-tag: #93c5fd;
  --ncc-c-tagp: #a5acba;
  --ncc-c-attr: #d8b4fe;
  --ncc-c-aval: #86efac;
  --ncc-c-ent: #fdba74;
  --ncc-c-decl: #a5acba;

  color-scheme: dark;
}

/* ---------------------------------------------------------------- header */

.nc-code-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 38px;
  padding: 4px 8px 4px 10px;
  border-bottom: 1px solid var(--ncc-border);
  background: var(--ncc-bg);
}

.nc-code-file {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}

.nc-code-name {
  overflow: hidden;
  font-size: var(--nc-fs-md, 13px);
  font-weight: var(--nc-fw-semibold, 600);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nc-code-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.nc-code-meta {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--ncc-dim);
  font-size: var(--nc-fs-sm, 12px);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nc-code-dirty {
  flex: none;
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, var(--ncc-warning) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ncc-warning) 12%, var(--ncc-bg));
  color: var(--ncc-warning);
  font-size: var(--nc-fs-sm, 12px);
  font-weight: var(--nc-fw-semibold, 600);
  line-height: 16px;
  white-space: nowrap;
  cursor: help;
}

.nc-code-dirty[hidden] {
  display: none;
}

.nc-code-actions {
  display: flex;
  flex: none;
  gap: 4px;
}

.nc-code-btn {
  height: 24px;
  min-width: 24px;
  padding: 0 9px;
  border: 1px solid var(--ncc-border);
  border-radius: 5px;
  background: var(--ncc-bg);
  color: var(--ncc-text);
  font: inherit;
  font-size: var(--nc-fs-md, 13px);
  line-height: 22px;
  white-space: nowrap;
  cursor: pointer;
}

.nc-code-btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--ncc-accent) 55%, var(--ncc-border));
  background: var(--ncc-bg-2);
}

.nc-code-btn:focus-visible {
  outline: 2px solid var(--ncc-accent);
  outline-offset: 2px;
}

.nc-code-btn[aria-pressed="true"] {
  border-color: var(--ncc-accent);
  background: color-mix(in srgb, var(--ncc-accent) 12%, var(--ncc-bg));
  color: var(--ncc-text);
}

.nc-code-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.nc-code-btn.nc-code-icon {
  width: 24px;
  padding: 0;
  font-size: var(--nc-fs-sm, 12px);
  text-align: center;
}

/* ---------------------------------------------------------------- search */

.nc-code-search {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 4px 8px;
  border-bottom: 1px solid var(--ncc-border);
  background: var(--ncc-bg-2);
}

.nc-code-search[hidden],
.nc-code-notice[hidden] {
  display: none;
}

.nc-code-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 24px;
  padding: 0 7px;
  border: 1px solid var(--ncc-border-strong);
  border-radius: 5px;
  background: var(--ncc-bg);
  color: var(--ncc-text);
  font-family: var(--ncc-font);
  font-size: var(--ncc-fs);
}

.nc-code-search-input::placeholder {
  color: var(--ncc-dim);
  opacity: 1;
}

.nc-code-search-input:focus {
  outline: none;
}

.nc-code-search-input:focus-visible {
  border-color: var(--ncc-accent);
  outline: 2px solid var(--ncc-accent);
  outline-offset: 2px;
}

.nc-code-search-count {
  flex: none;
  min-width: 48px;
  color: var(--ncc-dim);
  font-size: var(--nc-fs-sm, 12px);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.nc-code-search-count.is-none {
  color: var(--ncc-danger);
}

.nc-code-notice {
  flex: none;
  padding: 4px 10px;
  border-bottom: 1px solid var(--ncc-border);
  background: color-mix(in srgb, var(--ncc-warning) 12%, var(--ncc-bg));
  color: var(--ncc-text);
  font-size: var(--nc-fs-sm, 12px);
}

/* ------------------------------------------------------------------ body */

.nc-code-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--ncc-bg);
}

.nc-code-view {
  position: absolute;
  inset: 0;
}

.nc-code-view[hidden],
.nc-code-editor[hidden],
.nc-code-empty[hidden] {
  display: none;
}

.nc-code-view:focus {
  outline: none;
}

.nc-code-view:focus-visible {
  outline: 2px solid var(--ncc-accent);
  outline-offset: -2px;
}

.nc-code-scroller {
  position: absolute;
  inset: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.nc-code-scroller::-webkit-scrollbar-corner,
.nc-code-textarea::-webkit-scrollbar-corner {
  background: var(--ncc-bg);
}

.nc-code-canvas {
  position: relative;
}

/* The listing and the editor share font metrics exactly, so the editor's text lands on the
   listing's glyphs: no ligatures, no kerning, no letter spacing. */
.nc-code-layer,
.nc-code-textarea {
  font-family: var(--ncc-font);
  font-size: var(--ncc-fs);
  font-kerning: none;
  font-variant-ligatures: none;
  letter-spacing: 0;
  line-height: var(--ncc-lh);
  tab-size: 4;
}

.nc-code-layer {
  position: sticky;
  top: 0;
  left: 0;
  overflow: hidden;
}

.nc-code-gutter {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: var(--ncc-gutter-w);
  border-right: 1px solid var(--ncc-border);
  background: var(--ncc-bg-2);
  cursor: pointer;
  user-select: none;
}

.nc-code-text {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--ncc-gutter-w);
  overflow: hidden;
}

.nc-code-textin {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  will-change: transform;
}

.nc-code-probe {
  position: absolute;
  top: -100px;
  left: 0;
  visibility: hidden;
  white-space: pre;
  pointer-events: none;
}

.nc-code-line {
  position: absolute;
  right: 0;
  left: 0;
  height: var(--ncc-lh);
  padding-left: 8px;
  box-sizing: border-box;
  color: var(--ncc-text);
  white-space: pre;
  cursor: default;
}

.nc-code-src {
  white-space: pre;
}

/* Korean text: no synthetic italic (Menlo has no Hangul, so a slant would be faked). */
.nc-code-trunc {
  color: var(--ncc-dim);
  font-style: normal;
}

/* More text to the right: a 12px fade at the right edge of the text column (RU-18). */
.nc-code-fade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 12px;
  background: linear-gradient(to right, color-mix(in srgb, var(--ncc-bg) 0%, transparent), var(--ncc-bg));
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms linear;
}

.nc-code-panel.has-more-right .nc-code-fade {
  opacity: 1;
}

.nc-code-gline {
  position: absolute;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: var(--ncc-lh);
  color: var(--ncc-c-lno);
  font-size: var(--ncc-fs);
  font-variant-numeric: tabular-nums;
}

/* The diagnostic column is 14px only in files with line diagnostics; otherwise 4px (RU-18). */
.nc-code-gdiag {
  flex: none;
  width: var(--ncc-gdiag-w);
  height: 100%;
  position: relative;
}

.nc-code-gdiag.is-info::after,
.nc-code-gdiag.is-warning::after,
.nc-code-gdiag.is-error::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--ncc-info);
}

.nc-code-gdiag.is-warning::after {
  left: 2px;
  width: 0;
  height: 0;
  margin-top: -4.5px;
  border-right: 5px solid transparent;
  border-bottom: 9px solid var(--ncc-warning);
  border-left: 5px solid transparent;
  border-radius: 0;
  background: none;
}

.nc-code-gdiag.is-error::after {
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 1px;
  background: var(--ncc-danger);
  transform: rotate(45deg);
}

.nc-code-gnum {
  flex: 1 1 auto;
  padding-right: 4px;
  text-align: right;
}

.nc-code-gmark {
  flex: none;
  width: 10px;
  height: 100%;
  position: relative;
}

.nc-code-gmark.is-on::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 1px;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--ncc-mark, currentColor);
}

/* --------------------------------------------------------------- highlights */

/* One fill per line at most: the selection fill replaces the op band, and the playback line adds
   no fill of its own (RU-05). Syntax colours are tuned for >= 4.5:1 on each single fill. */
.nc-code-line.in-op {
  background: color-mix(in srgb, var(--ncc-op) var(--ncc-op-mix), transparent);
}

.nc-code-gline.in-op {
  box-shadow: inset 3px 0 0 var(--ncc-op);
}

.nc-code-line.is-sel {
  background: var(--ncc-sel-bg);
  box-shadow: inset 0 1px 0 var(--ncc-sel-edge), inset 0 -1px 0 var(--ncc-sel-edge);
}

.nc-code-gline.is-sel {
  background: var(--ncc-sel-bg);
  color: var(--ncc-text);
  font-weight: var(--nc-fw-bold, 700);
}

.nc-code-gline.in-op.is-sel {
  box-shadow: inset 3px 0 0 var(--ncc-op);
}

/* Playback line: a 3px bar in the playback colour (with its outline, which carries the contrast
   on a light panel), the gutter number and marker cells filled in the same colour with ▶ and a
   bold number. The bar joins the gutter cell across the gutter border into one marker. */
.nc-code-line.is-cur {
  box-shadow: inset 3px 0 0 var(--ncc-play-fill), inset 4px 0 0 var(--ncc-play-outline);
}

.nc-code-line.is-cur.is-sel {
  box-shadow:
    inset 3px 0 0 var(--ncc-play-fill),
    inset 4px 0 0 var(--ncc-play-outline),
    inset 0 1px 0 var(--ncc-sel-edge),
    inset 0 -1px 0 var(--ncc-sel-edge);
}

.nc-code-gline.is-cur {
  color: var(--ncc-play-outline);
  font-weight: var(--nc-fw-bold, 700);
}

.nc-code-gline.is-cur .nc-code-gnum,
.nc-code-gline.is-cur .nc-code-gmark {
  background: var(--ncc-play-fill);
}

.nc-code-gline.is-cur .nc-code-gmark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 0;
  height: 0;
  margin-top: -4px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--ncc-play-outline);
  border-radius: 0;
  background: none;
}

/* Far follow jump: the playback line blinks once (300 ms) so the eye finds it after the jump. */
.nc-code-line.is-flash {
  animation: ncc-flash 300ms ease-out;
}

@keyframes ncc-flash {
  from {
    background-color: color-mix(in srgb, var(--ncc-play-fill) var(--ncc-flash-mix), transparent);
  }
}

/* Reduced motion: no fade, a static highlight for the same short moment instead. */
@media (prefers-reduced-motion: reduce) {
  .nc-code-panel .nc-code-line.is-flash {
    animation: none;
    background-color: color-mix(in srgb, var(--ncc-play-fill) var(--ncc-flash-mix), transparent);
  }

  .nc-code-fade {
    transition: none;
  }
}

/* While playing, the playback line wins: the selected line keeps only a thin dashed outline. */
.nc-code-panel.is-playing .nc-code-line.is-sel:not(.is-cur) {
  background: none;
  box-shadow: none;
  outline: 1px dashed color-mix(in srgb, var(--ncc-accent) 65%, transparent);
  outline-offset: -1px;
}

.nc-code-panel.is-playing .nc-code-line.in-op.is-sel:not(.is-cur) {
  background: color-mix(in srgb, var(--ncc-op) var(--ncc-op-mix), transparent);
}

.nc-code-panel.is-playing .nc-code-line.is-sel.is-cur {
  background: none;
  box-shadow: inset 3px 0 0 var(--ncc-play-fill), inset 4px 0 0 var(--ncc-play-outline);
}

.nc-code-panel.is-playing .nc-code-line.in-op.is-sel.is-cur {
  background: color-mix(in srgb, var(--ncc-op) var(--ncc-op-mix), transparent);
}

.nc-code-panel.is-playing .nc-code-gline.is-sel:not(.is-cur) {
  background: none;
  font-weight: var(--nc-fw-regular, 400);
}

/* Current search hit line in the editor (the textarea selection marks the hit itself). */
.nc-code-line.is-hit {
  outline: 1px solid var(--ncc-hit-cur-bg);
  outline-offset: -1px;
}

.nc-code-hit {
  border-radius: 2px;
  background: var(--ncc-hit-bg);
  box-shadow: inset 0 0 0 1px var(--ncc-hit-edge);
  color: inherit;
}

.nc-code-hit.is-current {
  background: var(--ncc-hit-cur-bg);
  box-shadow: 0 0 0 1px var(--ncc-hit-cur-bg);
}

.nc-code-hit.is-current,
.nc-code-hit.is-current > * {
  color: var(--ncc-hit-cur-fg);
}

/* ---------------------------------------------------------------- syntax */

.ncc-lno { color: var(--ncc-c-lno); }
.ncc-g { color: var(--ncc-c-g); font-weight: 600; }
.ncc-g0 { color: color-mix(in srgb, var(--ncc-c-rapid) var(--ncc-motion-mix), var(--ncc-text)); font-weight: 700; }
.ncc-g1 { color: color-mix(in srgb, var(--ncc-c-cut) var(--ncc-motion-mix), var(--ncc-text)); font-weight: 700; }
.ncc-g23 { color: color-mix(in srgb, var(--ncc-c-arcmove) var(--ncc-motion-mix), var(--ncc-text)); font-weight: 700; }
.ncc-m { color: var(--ncc-c-m); font-weight: 600; }
.ncc-axis { color: var(--ncc-c-axis); }
.ncc-arc { color: var(--ncc-c-arc); }
.ncc-feed { color: var(--ncc-c-feed); }
.ncc-tool { color: var(--ncc-c-tool); font-weight: 600; }
.ncc-par { color: var(--ncc-c-par); }
.ncc-prog { color: var(--ncc-c-prog); font-weight: 700; }
.ncc-com { color: var(--ncc-c-com); }
.ncc-pct { color: var(--ncc-c-pct); font-weight: 700; }
.ncc-bd { color: var(--ncc-c-pct); font-weight: 700; }
.ncc-num { color: var(--ncc-c-num); }
.ncc-var { color: var(--ncc-c-var); }
.ncc-kw { color: var(--ncc-c-kw); font-weight: 600; }
.ncc-op { color: var(--ncc-c-op); }
.ncc-word { color: var(--ncc-c-word); }
.ncc-sec { color: var(--ncc-c-sec); font-weight: 700; }
.ncc-cont { color: var(--ncc-c-cont); font-weight: 700; }
.ncc-mac { color: var(--ncc-c-mac); font-weight: 700; }
.ncc-macn { color: var(--ncc-c-macn); }
.ncc-el { color: var(--ncc-c-el); font-weight: 600; }
.ncc-kind { color: var(--ncc-c-kind); font-weight: 700; }
.ncc-key { color: var(--ncc-c-key); }
.ncc-dkey { color: var(--ncc-c-dkey); }
.ncc-str { color: var(--ncc-c-str); }
.ncc-end { color: var(--ncc-c-sec); font-weight: 700; }
.ncc-tag { color: var(--ncc-c-tag); }
.ncc-tagp { color: var(--ncc-c-tagp); }
.ncc-attr { color: var(--ncc-c-attr); }
.ncc-aval { color: var(--ncc-c-aval); }
.ncc-text { color: var(--ncc-c-text); }
.ncc-ent { color: var(--ncc-c-ent); }
.ncc-decl { color: var(--ncc-c-decl); }
.ncc-cdata { color: var(--ncc-c-com); }

/* Screen-reader-only announcement of the picked line (MU-13). */
.nc-code-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ empty */

.nc-code-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--ncc-dim);
  font-size: var(--nc-fs-md, 13px);
  text-align: center;
}

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

/* The textarea covers the text column; the listing under it keeps drawing highlighted text,
   line numbers and bands. Weight and slant are dropped while editing so every glyph keeps the
   advance of the textarea's regular face. */
.nc-code-editor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--ncc-gutter-w);
  z-index: 2;
  /* Relayout boundary: typing lays out the textarea only, not the page around it. */
  contain: strict;
}

.nc-code-panel.is-editing .nc-code-scroller {
  overflow: hidden;
}

.nc-code-panel.is-editing .nc-code-line,
.nc-code-panel.is-editing .nc-code-line * {
  font-style: normal;
  font-weight: 400;
}

.nc-code-textarea {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 8px var(--ncc-lh);
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-style: normal;
  font-weight: 400;
  white-space: pre;
  overflow-wrap: normal;
  resize: none;
  caret-color: var(--ncc-text);
}

.nc-code-textarea::selection {
  background: color-mix(in srgb, var(--ncc-accent) 30%, transparent);
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.nc-code-textarea:focus-visible {
  outline: 2px solid var(--ncc-accent);
  outline-offset: -2px;
}

/* Large programs: a plain textarea shows its own text; the listing only draws bands. */
.nc-code-panel.is-plain-edit .nc-code-textarea,
.nc-code-panel.is-plain-edit .nc-code-textarea::selection {
  color: var(--ncc-text);
  -webkit-text-fill-color: currentColor;
}