/*
 * Evaluation detail page and the untrusted-text / code-excerpt components (D-W4-03).
 *
 * Registered as a Filament panel asset (AdminPanelProvider::assets) and published by `php artisan filament:assets`,
 * which `filament:upgrade` runs on composer install and in the deploy image. No Node build is involved.
 *
 * Every colour comes from Filament's CSS variables (--gray-*, --primary-*, --color-* set by the `fi-color
 * fi-color-{name}` classes), so the page follows the panel palette. Dark mode uses Filament's own `.dark` class
 * selector. No literal colour values live in this file.
 */

/* Layout ------------------------------------------------------------------------------------------------------ */

.tc-stack { display: grid; gap: calc(var(--spacing) * 6); }
.tc-stack-sm { display: grid; gap: calc(var(--spacing) * 3); }
.tc-row { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 2); }
.tc-spread { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 3); }
.tc-muted { color: var(--gray-500); }
.dark .tc-muted { color: var(--gray-400); }
.tc-mono { font-family: var(--font-mono); font-size: 0.8125rem; }
.tc-num { font-variant-numeric: tabular-nums; }
.tc-small { font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.tc-xs { font-size: var(--text-xs); line-height: var(--text-xs--line-height); }

.tc-surface {
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--gray-950) 5%, transparent), 0 1px 2px 0 color-mix(in oklab, var(--gray-950) 5%, transparent);
}
.dark .tc-surface {
    background-color: var(--gray-900);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-white) 10%, transparent);
}

.tc-heading { font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--gray-950); }
.dark .tc-heading { color: var(--color-white); }
.tc-label { font-size: var(--text-xs); font-weight: var(--font-weight-medium); color: var(--gray-500); }
.dark .tc-label { color: var(--gray-400); }

/* Summary ----------------------------------------------------------------------------------------------------- */

.tc-summary { padding: calc(var(--spacing) * 6); display: grid; gap: calc(var(--spacing) * 5); }
.tc-summary-title { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-tight); color: var(--gray-950); overflow-wrap: anywhere; }
.dark .tc-summary-title { color: var(--color-white); }
.tc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: calc(var(--spacing) * 4) calc(var(--spacing) * 6); margin: 0; }
.tc-facts div { min-width: 0; }
.tc-facts dt { font-size: var(--text-xs); color: var(--gray-500); }
.dark .tc-facts dt { color: var(--gray-400); }
.tc-facts dd { margin: calc(var(--spacing) * 0.5) 0 0; font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--gray-950); overflow-wrap: anywhere; }
.dark .tc-facts dd { color: var(--color-white); }

.tc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: calc(var(--spacing) * 4); }
.tc-stat { padding: calc(var(--spacing) * 5); display: grid; gap: calc(var(--spacing) * 2); align-content: start; }
.tc-stat-value { font-size: var(--text-3xl); line-height: 1.1; font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; color: var(--gray-950); }
.dark .tc-stat-value { color: var(--color-white); }
.tc-stat-value small { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--gray-500); letter-spacing: 0; margin-inline-start: calc(var(--spacing) * 1); }
.tc-stat-split { display: flex; justify-content: space-between; gap: calc(var(--spacing) * 2); font-size: var(--text-xs); color: var(--gray-500); }
.dark .tc-stat-split { color: var(--gray-400); }
.tc-stat-split strong { color: var(--gray-700); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.dark .tc-stat-split strong { color: var(--gray-200); }

.tc-cta { padding: calc(var(--spacing) * 5); display: grid; gap: calc(var(--spacing) * 3); align-content: space-between; background-color: var(--color-50); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-600) 20%, transparent); }
.dark .tc-cta { background-color: color-mix(in oklab, var(--color-400) 10%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-400) 25%, transparent); }
.tc-cta .tc-stat-value { color: var(--color-700); }
.dark .tc-cta .tc-stat-value { color: var(--color-300); }

.tc-note { display: flex; gap: calc(var(--spacing) * 2); align-items: flex-start; font-size: var(--text-sm); color: var(--gray-600); }
.dark .tc-note { color: var(--gray-300); }
.tc-note .fi-icon { color: var(--gray-400); margin-top: 0.125rem; flex-shrink: 0; }

/* Meters ------------------------------------------------------------------------------------------------------ */

.tc-meter { position: relative; height: 0.5rem; border-radius: 9999px; background-color: var(--gray-100); overflow: hidden; }
.dark .tc-meter { background-color: color-mix(in oklab, var(--color-white) 8%, transparent); }
.tc-meter-fill { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 9999px; background-color: var(--color-500); }
.tc-meter-marker { position: absolute; inset-block: -0.125rem; width: 2px; background-color: var(--gray-950); }
.dark .tc-meter-marker { background-color: var(--color-white); }
.tc-meter-hatched { background-image: repeating-linear-gradient(135deg, color-mix(in oklab, var(--gray-400) 25%, transparent) 0 4px, transparent 4px 8px); }

/* Findings ---------------------------------------------------------------------------------------------------- */

.tc-toolbar { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 3) calc(var(--spacing) * 6); align-items: center; }
.tc-toolbar .fi-tabs { flex-wrap: wrap; }

.tc-finding { position: relative; overflow: hidden; }
.tc-finding::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background-color: var(--color-500); }
.tc-finding-body { padding: calc(var(--spacing) * 5) calc(var(--spacing) * 6) calc(var(--spacing) * 5) calc(var(--spacing) * 7); display: grid; gap: calc(var(--spacing) * 4); }
.tc-finding-title { font-size: var(--text-lg); line-height: var(--text-lg--line-height); font-weight: var(--font-weight-semibold); color: var(--gray-950); max-width: 72ch; }
.dark .tc-finding-title { color: var(--color-white); }
.tc-finding-desc { font-size: var(--text-sm); line-height: 1.6; color: var(--gray-700); max-width: 80ch; }
.dark .tc-finding-desc { color: var(--gray-300); }
.tc-finding-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: calc(var(--spacing) * 3); }
.tc-finding-block { border-radius: var(--radius-lg); padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4); background-color: var(--gray-50); display: grid; gap: calc(var(--spacing) * 1); font-size: var(--text-sm); line-height: 1.55; color: var(--gray-800); }
.dark .tc-finding-block { background-color: color-mix(in oklab, var(--color-white) 4%, transparent); color: var(--gray-200); }
.tc-finding-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 3); padding: calc(var(--spacing) * 3) calc(var(--spacing) * 6) calc(var(--spacing) * 3) calc(var(--spacing) * 7); border-top: 1px solid var(--gray-200); background-color: color-mix(in oklab, var(--gray-50) 60%, transparent); }
.dark .tc-finding-foot { border-top-color: color-mix(in oklab, var(--color-white) 10%, transparent); background-color: color-mix(in oklab, var(--color-white) 2%, transparent); }

.tc-empty { padding: calc(var(--spacing) * 8); text-align: center; }

/* Code excerpt ------------------------------------------------------------------------------------------------ */

.tc-code { border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--gray-200); background-color: var(--color-white); }
.dark .tc-code { box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-white) 10%, transparent); background-color: var(--gray-950); }
.tc-code-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 2); padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3); background-color: var(--gray-50); border-bottom: 1px solid var(--gray-200); }
.dark .tc-code-head { background-color: color-mix(in oklab, var(--color-white) 5%, transparent); border-bottom-color: color-mix(in oklab, var(--color-white) 10%, transparent); }
.tc-code-path { display: flex; align-items: center; gap: calc(var(--spacing) * 2); min-width: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--gray-700); }
.dark .tc-code-path { color: var(--gray-300); }
.tc-code-path .fi-icon { color: var(--gray-400); flex-shrink: 0; }
.tc-code-path .tc-untrusted { overflow-wrap: anywhere; }
.tc-code-lines { color: var(--gray-500); white-space: nowrap; }
.tc-code-scroll { overflow-x: auto; }
.tc-code-table { border-collapse: collapse; width: 100%; font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.6; }
.tc-code-table td { padding: 0; vertical-align: top; }
.tc-code-gutter { width: 1%; padding-inline: calc(var(--spacing) * 3) !important; text-align: right; color: var(--gray-400); background-color: var(--gray-50); border-right: 1px solid var(--gray-200); user-select: none; font-variant-numeric: tabular-nums; }
.dark .tc-code-gutter { color: var(--gray-500); background-color: color-mix(in oklab, var(--color-white) 3%, transparent); border-right-color: color-mix(in oklab, var(--color-white) 8%, transparent); }
.tc-code-line { padding-inline: calc(var(--spacing) * 4) !important; white-space: pre; color: var(--gray-900); }
.dark .tc-code-line { color: var(--gray-100); }
.tc-code-table tr:first-child td { padding-top: calc(var(--spacing) * 2); }
.tc-code-table tr:last-child td { padding-bottom: calc(var(--spacing) * 2); }
.tc-code-missing { padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4); font-size: var(--text-sm); color: var(--gray-500); }

/* Untrusted text ---------------------------------------------------------------------------------------------- */

.tc-untrusted { white-space: pre-wrap; overflow-wrap: anywhere; }
.tc-escape { border-radius: var(--radius-sm); padding-inline: 0.125rem; font-family: var(--font-mono); font-size: 0.85em; background-color: var(--warning-100); color: var(--warning-800); box-shadow: 0 0 0 1px color-mix(in oklab, var(--warning-600) 30%, transparent); }
.dark .tc-escape { background-color: color-mix(in oklab, var(--warning-400) 20%, transparent); color: var(--warning-200); }
.tc-hidden-badge { margin-inline-start: calc(var(--spacing) * 1); vertical-align: middle; }

/* Dimensions and Anti-Slop ------------------------------------------------------------------------------------ */

.tc-list { display: grid; }
.tc-list > * + * { border-top: 1px solid var(--gray-200); }
.dark .tc-list > * + * { border-top-color: color-mix(in oklab, var(--color-white) 10%, transparent); }
.tc-dim { display: grid; grid-template-columns: minmax(12rem, 1.2fr) minmax(10rem, 2fr) 5rem; gap: calc(var(--spacing) * 2) calc(var(--spacing) * 6); align-items: center; padding: calc(var(--spacing) * 4); }
.tc-dim-score { text-align: right; font-size: var(--text-lg); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; color: var(--gray-950); }
.dark .tc-dim-score { color: var(--color-white); }
.tc-dim-detail { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--gray-600); }
.dark .tc-dim-detail { color: var(--gray-400); }
.tc-dim-score-label { display: block; font-size: var(--text-xs); font-weight: var(--font-weight-normal); text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500); }
.dark .tc-dim-score-label { color: var(--gray-400); }
.tc-dim-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: calc(var(--spacing) * 1) calc(var(--spacing) * 6); margin: 0; font-size: var(--text-xs); color: var(--gray-600); }
.dark .tc-dim-facts { color: var(--gray-400); }
.tc-dim-facts dt { font-weight: var(--font-weight-medium); color: var(--gray-500); }
.tc-dim-facts dd { margin: 0; }
.tc-dim.tc-excluded .tc-heading { color: var(--gray-600); }
.dark .tc-dim.tc-excluded .tc-heading { color: var(--gray-300); }
.tc-dominant { background-color: var(--color-50); }
.dark .tc-dominant { background-color: color-mix(in oklab, var(--color-400) 10%, transparent); }
@media (max-width: 40rem) {
    .tc-dim { grid-template-columns: 1fr 4rem; }
    .tc-dim > .tc-dim-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* Pipeline timeline ------------------------------------------------------------------------------------------- */

.tc-timeline { list-style: none; padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4); }
.tc-step { position: relative; display: grid; grid-template-columns: 1.5rem 1fr auto; gap: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2.5); align-items: start; }
.tc-step::before { content: ""; position: absolute; inset-inline-start: calc(0.75rem - 1px); top: 2rem; bottom: -0.5rem; width: 2px; background-color: var(--gray-200); }
.dark .tc-step::before { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); }
.tc-step:last-child::before { display: none; }
.tc-step-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 9999px; background-color: var(--color-white); color: var(--color-500); }
.dark .tc-step-icon { background-color: var(--gray-900); color: var(--color-400); }
.tc-step-icon .fi-icon { width: 1.25rem; height: 1.25rem; }
.tc-step-skipped .tc-heading { color: var(--gray-500); font-weight: var(--font-weight-medium); }
.dark .tc-step-skipped .tc-heading { color: var(--gray-400); }
.tc-step-message { margin-top: calc(var(--spacing) * 1); font-size: var(--text-sm); color: var(--gray-700); }
.dark .tc-step-message { color: var(--gray-300); }

/* Tables ------------------------------------------------------------------------------------------------------ */

.tc-table-wrap { overflow-x: auto; }
.tc-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); text-align: start; }
.tc-table th { padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); color: var(--gray-500); text-align: start; background-color: var(--gray-50); border-bottom: 1px solid var(--gray-200); white-space: nowrap; }
.dark .tc-table th { color: var(--gray-400); background-color: color-mix(in oklab, var(--color-white) 5%, transparent); border-bottom-color: color-mix(in oklab, var(--color-white) 10%, transparent); }
.tc-table td { padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4); vertical-align: top; color: var(--gray-950); border-bottom: 1px solid var(--gray-100); }
.dark .tc-table td { color: var(--gray-100); border-bottom-color: color-mix(in oklab, var(--color-white) 6%, transparent); }
.tc-table tr:last-child td { border-bottom: 0; }
.tc-table .tc-right { text-align: right; font-variant-numeric: tabular-nums; }
.tc-table-detail td { padding-top: 0; }

.tc-actions { column-gap: calc(var(--spacing) * 4); }
.tc-list-item { padding-block: calc(var(--spacing) * 3); }
.tc-stack-xs { display: grid; gap: calc(var(--spacing) * 1.5); }
.tc-nowrap { flex-wrap: nowrap; }
.tc-nowrap .tc-meter { flex: 1; }
.tc-col-wide { width: 35%; }
/* Lists and tables that run edge to edge inside a compact Filament section. */
.tc-bleed { margin: calc(var(--spacing) * -4); }
.tc-bleed.tc-bleed-after { margin-top: calc(var(--spacing) * 4); }
.tc-toolbar .fi-tabs { margin-inline: 0; }