/* 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(--color-gray-2);
    border-radius: var(--radius-md);
    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(--color-gray-2);
    background: var(--color-bg-secondary);
  }

  .code-viewer td.linenos pre {
    padding: 0 var(--space-sm);
    color: var(--color-text-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-sm);
    border-left: 3px solid transparent;
  }

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

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

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

  .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-sm);
  }

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

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

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

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

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

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

/* ============================================
   PYGMENTS SYNTAX THEME (default)
   Scoped to .code-viewer__highlight
   ============================================ */
.code-viewer__highlight .hll { background-color: #ffc; }

.code-viewer__highlight .c {
  color: #3D7B7B;
  font-style: italic;
}

.code-viewer__highlight .err { border: 1px solid #F00; }

.code-viewer__highlight .k {
  color: #008000;
  font-weight: bold;
}

.code-viewer__highlight .o { color: #666; }

.code-viewer__highlight .ch,
.code-viewer__highlight .cm,
.code-viewer__highlight .cpf,
.code-viewer__highlight .c1,
.code-viewer__highlight .cs {
  color: #3D7B7B;
  font-style: italic;
}

.code-viewer__highlight .cp { color: #9C6500; }
.code-viewer__highlight .gd { color: #A00000; }
.code-viewer__highlight .ge { font-style: italic; }

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

.code-viewer__highlight .gr { color: #E40000; }

.code-viewer__highlight .gh,
.code-viewer__highlight .gp {
  color: #000080;
  font-weight: bold;
}

.code-viewer__highlight .gi { color: #008400; }
.code-viewer__highlight .go { color: #717171; }
.code-viewer__highlight .gs { font-weight: bold; }

.code-viewer__highlight .gu {
  color: #800080;
  font-weight: bold;
}

.code-viewer__highlight .gt { color: #04D; }

.code-viewer__highlight .kc,
.code-viewer__highlight .kd,
.code-viewer__highlight .kn,
.code-viewer__highlight .kr {
  color: #008000;
  font-weight: bold;
}

.code-viewer__highlight .kp { color: #008000; }
.code-viewer__highlight .kt { color: #B00040; }

.code-viewer__highlight .m,
.code-viewer__highlight .mb,
.code-viewer__highlight .mf,
.code-viewer__highlight .mh,
.code-viewer__highlight .mi,
.code-viewer__highlight .mo { color: #666; }

.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 { color: #BA2121; }

.code-viewer__highlight .sd {
  color: #BA2121;
  font-style: italic;
}

.code-viewer__highlight .se {
  color: #AA5D1F;
  font-weight: bold;
}

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

.code-viewer__highlight .na { color: #687822; }
.code-viewer__highlight .nb { color: #008000; }

.code-viewer__highlight .nc {
  color: #00F;
  font-weight: bold;
}

.code-viewer__highlight .no { color: #800; }
.code-viewer__highlight .nd { color: #A2F; }

.code-viewer__highlight .ni {
  color: #717171;
  font-weight: bold;
}

.code-viewer__highlight .ne {
  color: #CB3F38;
  font-weight: bold;
}

.code-viewer__highlight .nf { color: #00F; }
.code-viewer__highlight .nl { color: #767600; }

.code-viewer__highlight .nn {
  color: #00F;
  font-weight: bold;
}

.code-viewer__highlight .nt {
  color: #008000;
  font-weight: bold;
}

.code-viewer__highlight .nv { color: #19177C; }

.code-viewer__highlight .ow {
  color: #A2F;
  font-weight: bold;
}

.code-viewer__highlight .w { color: #BBB; }
.code-viewer__highlight .sx { color: #008000; }
.code-viewer__highlight .sr { color: #A45A77; }
.code-viewer__highlight .ss { color: #19177C; }
.code-viewer__highlight .bp { color: #008000; }
.code-viewer__highlight .fm { color: #00F }
.code-viewer__highlight .vc { color: #19177C }
.code-viewer__highlight .vg { color: #19177C }
.code-viewer__highlight .vi { color: #19177C }
.code-viewer__highlight .vm { color: #19177C }
.code-viewer__highlight .il { color: #666 }