/* Code Viewer Component */

/* Line-numbered code display with per-line status coloring (e.g. coverage) */

@layer components {
  /* ============================================
     BASE CODE VIEWER
     ============================================ */
  .code-viewer {
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-2);
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.5;
  }

  .code-viewer pre {
    margin: 0;
    padding: 0;
    overflow-x: auto;
  }

  /* Pygments table layout (linenos mode) */
  .code-viewer table {
    border-collapse: collapse;
    width: 100%;
  }

  .code-viewer td {
    padding: 0;
    vertical-align: top;
  }

  /* Line numbers column */
  .code-viewer td.linenos {
    width: 1%;
    white-space: nowrap;
    padding-right: 0;
    user-select: none;
    border-right: 1px solid var(--neutral-200);
    background: var(--surface-sunken);
  }

  .code-viewer td.linenos pre {
    padding: 0 var(--space-3);
    color: var(--fg-muted);
    text-align: right;
  }

  /* Code column */
  .code-viewer td.code {
    padding-left: 0;
  }

  .code-viewer td.code pre {
    padding: 0;
  }

  /* ============================================
     COVERAGE LINE STATUS
     ============================================ */
  .code-viewer__line {
    display: block;
    padding: 0 var(--space-3);
    border-left: 3px solid transparent;
  }

  .code-viewer__line--covered {
    background: oklch(from var(--brand) l c h / 0.08);
    border-left-color: var(--brand);
  }

  .code-viewer__line--uncovered {
    background: oklch(from var(--danger) l c h / 0.08);
    border-left-color: var(--danger);
  }

  .code-viewer__line--partial {
    background: oklch(from var(--caution) l c h / 0.08);
    border-left-color: var(--caution);
  }

  .code-viewer__line--none {
    border-left-color: transparent;
  }

  /* ============================================
     COVERAGE MAP (fallback without source code)
     ============================================ */
  .code-viewer__map {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: var(--space-3);
  }

  .code-viewer__range {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-1);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
  }

  .code-viewer__range--covered {
    background: oklch(from var(--brand) l c h / 0.08);
    border-left: 3px solid var(--brand);
  }

  .code-viewer__range--uncovered {
    background: oklch(from var(--danger) l c h / 0.08);
    border-left: 3px solid var(--danger);
  }

  .code-viewer__range-lines {
    color: var(--fg-muted);
    min-width: 100px;
  }

  .code-viewer__range-status {
    font-weight: var(--weight-semi);
  }

  .code-viewer__range-hits {
    color: var(--fg-muted);
    margin-left: auto;
  }
}

/* ============================================
   PYGMENTS SYNTAX THEME
   Scoped to .code-viewer__highlight; consumes the --syntax-* token suite
   declared in tokens.css. Light + dark auto-toggle via prefers-color-scheme.
   See docs/brand-assets.md for the token semantics.
   ============================================ */

/* Highlighted line background */
.code-viewer__highlight .hll { background-color: var(--syntax-highlight-line); }

/* Errors — bordered, not colored, so the underlying token color stays readable */
.code-viewer__highlight .err { border: 1px solid var(--syntax-error-border); }

/* Comments — italics, all variants */
.code-viewer__highlight .c,
.code-viewer__highlight .ch,
.code-viewer__highlight .cm,
.code-viewer__highlight .cpf,
.code-viewer__highlight .c1,
.code-viewer__highlight .cs {
  color: var(--syntax-comment);
  font-style: italic;
}

/* Preprocessor directives (#include etc.) */
.code-viewer__highlight .cp { color: var(--syntax-attribute); }

/* Keywords — bold language reserved words */
.code-viewer__highlight .k,
.code-viewer__highlight .kc,
.code-viewer__highlight .kd,
.code-viewer__highlight .kn,
.code-viewer__highlight .kr,
.code-viewer__highlight .nt {
  color: var(--syntax-keyword);
  font-weight: bold;
}

.code-viewer__highlight .kp { color: var(--syntax-keyword); }
.code-viewer__highlight .kt { color: var(--syntax-keyword-type); }

/* Operators and numbers — muted neutral */
.code-viewer__highlight .o,
.code-viewer__highlight .m,
.code-viewer__highlight .mb,
.code-viewer__highlight .mf,
.code-viewer__highlight .mh,
.code-viewer__highlight .mi,
.code-viewer__highlight .mo,
.code-viewer__highlight .il {
  color: var(--syntax-number);
}

/* Strings */
.code-viewer__highlight .s,
.code-viewer__highlight .sa,
.code-viewer__highlight .sb,
.code-viewer__highlight .sc,
.code-viewer__highlight .dl,
.code-viewer__highlight .s2,
.code-viewer__highlight .sh,
.code-viewer__highlight .s1,
.code-viewer__highlight .sx {
  color: var(--syntax-string);
}

.code-viewer__highlight .sd {
  color: var(--syntax-string);
  font-style: italic;
}

.code-viewer__highlight .se {
  color: var(--syntax-string-escape);
  font-weight: bold;
}

/* Regex / string interpolation — distinct mauve */
.code-viewer__highlight .sr,
.code-viewer__highlight .si {
  color: var(--syntax-regex);
}

.code-viewer__highlight .si { font-weight: bold; }

/* Names */
.code-viewer__highlight .nf,
.code-viewer__highlight .fm {
  color: var(--syntax-name);
}

.code-viewer__highlight .nc,
.code-viewer__highlight .nn {
  color: var(--syntax-name);
  font-weight: bold;
}

/* Built-ins */
.code-viewer__highlight .nb,
.code-viewer__highlight .bp {
  color: var(--syntax-builtin);
}

/* Constants */
.code-viewer__highlight .no { color: var(--syntax-constant); }

/* Decorators / operator words */
.code-viewer__highlight .nd { color: var(--syntax-decorator); }

.code-viewer__highlight .ow {
  color: var(--syntax-decorator);
  font-weight: bold;
}

/* Attributes / labels */
.code-viewer__highlight .na,
.code-viewer__highlight .nl {
  color: var(--syntax-attribute);
}

/* Exceptions */
.code-viewer__highlight .ne {
  color: var(--syntax-error);
  font-weight: bold;
}

.code-viewer__highlight .ni {
  color: var(--syntax-generic-output);
  font-weight: bold;
}

/* Variables — all flavors */
.code-viewer__highlight .nv,
.code-viewer__highlight .vc,
.code-viewer__highlight .vg,
.code-viewer__highlight .vi,
.code-viewer__highlight .vm,
.code-viewer__highlight .ss {
  color: var(--syntax-variable);
}

/* Whitespace */
.code-viewer__highlight .w { color: var(--syntax-generic-output); }

/* Generic — used by diff/traceback/output formatters */
.code-viewer__highlight .gd { color: var(--syntax-diff-deleted); }
.code-viewer__highlight .gi { color: var(--syntax-diff-inserted); }
.code-viewer__highlight .go { color: var(--syntax-generic-output); }
.code-viewer__highlight .gr { color: var(--syntax-error); }
.code-viewer__highlight .gt { color: var(--syntax-generic-traceback); }

.code-viewer__highlight .gh,
.code-viewer__highlight .gp {
  color: var(--syntax-generic-heading);
  font-weight: bold;
}

.code-viewer__highlight .gu {
  color: var(--syntax-decorator);
  font-weight: bold;
}

.code-viewer__highlight .ge { font-style: italic; }
.code-viewer__highlight .gs { font-weight: bold; }

.code-viewer__highlight .ges {
  font-weight: bold;
  font-style: italic;
}