/* trace_graph.css */

:root {
    --trace-font: 'Roboto Mono', 'Menlo', 'Consolas', monospace;
    --trace-text: #37474f;
    --trace-meta: #90a4ae;
    --line-color: #cfd8dc;

    /* Semantic Colors */
    --c-phase: #7e57c2;
    --c-match: #43a047;
    --c-mut: #f57f17;
    --c-err: #e53935;

    --c-inspect: #9e9e9e; /* Grey for scans */
}

/* Node coloring */
.type-inspection .trace-node {
    border-color: var(--c-inspect);
    background: #f5f5f5;
    width: 8px;
    height: 8px; /* Slightly smaller */
}

/* Tag coloring */
.tag-inspect { background: #f5f5f5; color: #616161; }

.trace-container {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 20px 0;
    margin-top: 15px;
    max-height: 500px;
    overflow-y: auto;
}

/* --- Row Layout --- */
.trace-row {
    display: flex;
    padding: 0 15px;
    position: relative;
    /* Min height to ensure connection lines stretch */
    min-height: 40px;
}

/* --- 1. Meta (Time) --- */
.trace-meta {
    width: 65px;
    text-align: right;
    font-family: var(--trace-font);
    font-size: 10px;
    color: var(--trace-meta);
    padding-top: 6px;
    flex-shrink: 0;
}

/* --- 2. Graph Column (Rails) --- */
.trace-graph-col {
    width: 40px;
    position: relative;
    flex-shrink: 0;
}

.trace-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--line-color);
    margin-left: -1px;
    z-index: 1;
}

/* The Dots */
.trace-node {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #78909c;
    position: absolute;
    top: 8px; /* Offset from top */
    left: 50%;
    margin-left: -5px;
    z-index: 2;
    box-shadow: 0 0 0 3px #fff; /* White halo to break line */
}

/* Contextual Node Colors */
.type-phase_start .trace-node { border-color: var(--c-phase); background: var(--c-phase); }
.type-match_semantics .trace-node { border-color: var(--c-match); }
.type-ast_mutation .trace-node { border-color: var(--c-mut); background: #fff3e0; }
.type-analysis_warning .trace-node { border-color: var(--c-err); }

/* --- 3. Content --- */
.trace-content {
    flex: 1;
    padding-bottom: 25px; /* Spacing between items */
    padding-left: 10px;
    overflow: hidden; /* Contain code blocks */
}

/* Indentation Scaling */
.trace-depth-0 .trace-content { padding-left: 10px; }
.trace-depth-1 .trace-content { padding-left: 30px; }
.trace-depth-2 .trace-content { padding-left: 50px; }
.trace-depth-3 .trace-content { padding-left: 70px; }

/* Visual connectors for indentation (optional L-shape) */
.trace-depth-1 .trace-graph-col::after,
.trace-depth-2 .trace-graph-col::after,
.trace-depth-3 .trace-graph-col::after {
    /* Implicit via margin, keeping it clean */
}

/* Header Typography */
.trace-header {
    display: flex;
    align-items: center;
    line-height: 1.5;
}

.trace-title-text {
    font-weight: 500;
    color: var(--trace-text);
}

.type-phase_start .trace-title-text {
    font-weight: 700;
    font-size: 14px;
    color: #455a64;
}

/* Badges */
.trace-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 8px;
    vertical-align: middle;
}

.tag-phase { background: #ede7f6; color: var(--c-phase); }
.tag-match { background: #e8f5e9; color: var(--c-match); }
.tag-warn  { background: #ffebee; color: var(--c-err); }

/* --- Details & Payloads --- */
.trace-details {
    margin-top: 6px;
}

.detail-text {
    font-size: 12px;
    color: #78909c;
    font-style: italic;
}

/* Mapping Pills (Torch -> JAX) */
.detail-map {
    margin-top: 4px;
    font-family: var(--trace-font);
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.map-pill {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    padding: 2px 6px;
    border-radius: 4px;
    color: #455a64;
}

.map-arrow { color: #b0bec5; }

/* --- Code Diffs --- */
.trace-diff-box {
    margin-top: 8px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 4px;
    font-family: var(--trace-font);
    font-size: 11px;
}

.diff-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: linear-gradient(to right, transparent 49.8%, #e0e0e0 50%, transparent 50.2%);
}

.diff-col {
    padding: 8px;
    white-space: pre-wrap;
    word-break: break-all;
}

.diff-del {
    color: #c62828;
    background-color: rgba(255, 235, 238, 0.5);
    text-decoration: line-through; /* Visual cue for removal */
}

.diff-add {
    color: #2e7d32;
    background-color: rgba(232, 245, 233, 0.5);
}