.evaluation-main{
    grid-template-columns: clamp(320px, 30vw, 460px) 1fr;
}

.evaluation-content{
    padding:12px;
    overflow:auto;
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height:0;
}

.evaluation-filter-bar{
    padding:10px;
    border-bottom:1px solid var(--border);
}

.evaluation-filter-input{
    width:100%;
    padding:9px 10px;
    border:1px solid var(--border);
    border-radius:12px;
    background:rgba(15,22,34,.75);
    color:var(--text);
    outline:none;
}

.evaluation-filter-input:focus{
    border-color:rgba(119,167,255,.7);
    box-shadow:0 0 0 2px rgba(119,167,255,.12);
}

.evaluation-tree{
    padding:8px;
    overflow:auto;
    min-height:0;
}

.evaluation-empty,
.tree-loading{
    padding:10px;
    font-size:13px;
}

.tree-run{
    margin-bottom:6px;
}

.tree-row{
    width:100%;
    border:1px solid transparent;
    background:transparent;
    color:var(--text);
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 9px;
    border-radius:10px;
    cursor:pointer;
    text-align:left;
    min-width:0;
}

.tree-row:hover{
    background:rgba(36,51,74,.55);
    border-color:rgba(119,167,255,.18);
}

.tree-run.selected > .tree-run-row,
.tree-file-row.selected{
    background:rgba(119,167,255,.12);
    border-color:rgba(119,167,255,.45);
}

.tree-caret,
.tree-file-icon{
    flex:0 0 18px;
    color:var(--muted);
}

.tree-title{
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.tree-badge{
    flex:0 0 auto;
    font-size:12px;
    color:var(--muted);
    padding:2px 8px;
    border:1px solid var(--border);
    border-radius:999px;
}

.tree-children{
    margin-left:21px;
    padding-left:8px;
    border-left:1px solid rgba(146,164,192,.18);
}

.tree-file-row{
    align-items:flex-start;
}

.tree-file-text{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.tree-file-meta{
    color:var(--muted);
    font-size:11px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.evaluation-meta-strip{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:14px;
    padding:10px;
    display:flex;
    flex-wrap:wrap;
    gap:8px 14px;
    font-size:13px;
}

.evaluation-meta-strip strong{
    color:#d7e5ff;
}

.evaluation-tabs{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.evaluation-tab{
    background:var(--btn);
    border:1px solid var(--border);
    border-radius:999px;
    padding:8px 12px;
    color:var(--text);
    cursor:pointer;
}

.evaluation-tab:hover{
    background:var(--btn2);
}

.evaluation-tab.active{
    border-color:var(--accent);
    background:rgba(119,167,255,.16);
}

.evaluation-tab-panel{
    display:none;
    min-height:0;
}

.evaluation-tab-panel.active{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.score-grid,
.quality-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(260px, 1fr));
    gap:12px;
}

.score-card,
.quality-card{
    gap:10px;
}

.score-title{
    font-weight:700;
    color:#d7e5ff;
    font-size:16px;
}

.score-line{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:6px 0;
    border-top:1px solid rgba(146,164,192,.12);
}

.score-line span{
    color:var(--muted);
}

.pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:2px 8px;
    border-radius:999px;
    border:1px solid var(--border);
    font-size:12px;
    white-space:nowrap;
}

.level-high{ color:#d7f7df; border-color:rgba(24,195,126,.45); background:rgba(24,195,126,.12); }
.level-moderate{ color:#fff0c2; border-color:rgba(224,167,58,.45); background:rgba(224,167,58,.12); }
.level-low{ color:#ffd5b3; border-color:rgba(225,126,52,.45); background:rgba(225,126,52,.12); }
.level-very_low{ color:#ffd0d0; border-color:rgba(214,80,80,.45); background:rgba(214,80,80,.12); }
.level-unknown{ color:var(--muted); }

.quality-metric{
    padding-top:8px;
    border-top:1px solid rgba(146,164,192,.12);
}

.quality-metric-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.quality-interpretation{
    margin-top:6px;
    font-size:12px;
    line-height:1.35;
}

.chart-grid{
    display:grid;
    gap:12px;
}

.chart-grid.two{
    grid-template-columns:repeat(2, minmax(320px, 1fr));
}

.chart-grid.one{
    grid-template-columns:1fr;
}

.chart-card{
    min-height:320px;
}

.chart-card.tall{
    min-height:420px;
}

.chart{
    flex:1;
    min-height:260px;
}

.chart.tall{
    min-height:350px;
}

.suite-overview-charts{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
}

.suite-overview-charts[hidden]{
    display:none;
}

.suite-chart-card{
    min-height:360px;
}

.suite-chart{
    min-height:300px;
}

.json-card{
    min-height:calc(100vh - 220px);
}

.evaluation-json{
    white-space:pre;
    tab-size:2;
    flex:1;
}

@media (max-width: 1100px){
    .evaluation-main{
        grid-template-columns:1fr;
    }

    .evaluation-tree-panel{
        min-height:320px;
    }

    .score-grid,
    .quality-grid,
    .chart-grid.two{
        grid-template-columns:1fr;
    }
}

.panel-actions{
    display:flex;
    gap:8px;
    align-items:center;
}

.tree-section{
    margin-bottom:14px;
}

.tree-section-title{
    padding:8px 9px 5px;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.suite-mode #tab-overview .chart-grid,
.suite-mode #tab-quality .chart-grid,
.suite-mode #tab-frames{
    display:none;
}

.suite-mode .score-grid{
    grid-template-columns:repeat(3, minmax(240px, 1fr));
}

.suite-mode .quality-grid{
    grid-template-columns:1fr;
}

.suite-run-table-card{
    overflow:hidden;
}

.suite-run-table-wrap{
    overflow:auto;
    max-height:calc(100vh - 370px);
    border:1px solid rgba(146,164,192,.12);
    border-radius:12px;
}

.suite-run-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}

.suite-run-table th,
.suite-run-table td{
    padding:8px 10px;
    border-bottom:1px solid rgba(146,164,192,.12);
    text-align:left;
    white-space:nowrap;
}

.suite-run-table th{
    position:sticky;
    top:0;
    z-index:1;
    background:rgba(15,22,34,.96);
    color:#d7e5ff;
}

.suite-run-table td:first-child{
    max-width:420px;
    overflow:hidden;
    text-overflow:ellipsis;
}

@media (max-width: 1100px){
    .suite-mode .score-grid{
        grid-template-columns:1fr;
    }
}

.suite-mode .evaluation-tab[data-tab="frames"] {
    display: none;
}


/* Recorded performance tab */
.recorded-performance-intro-card{
    gap:6px;
}

.recorded-performance-intro{
    line-height:1.45;
}

.recorded-performance-metric-grid{
    display:grid;
    grid-template-columns:repeat(5, minmax(160px, 1fr));
    gap:12px;
}

.recorded-performance-metric-card{
    min-height:96px;
    gap:6px;
}

.recorded-performance-metric-label{
    color:var(--muted);
    font-size:12px;
}

.recorded-performance-metric-value{
    color:#d7e5ff;
    font-size:20px;
    font-weight:800;
    overflow:hidden;
    text-overflow:ellipsis;
}

.recorded-performance-card{
    overflow:hidden;
}

.recorded-performance-empty{
    padding:10px;
}

.recorded-performance-table-wrap{
    overflow:auto;
    max-height:calc(100vh - 380px);
    border:1px solid rgba(146,164,192,.12);
    border-radius:12px;
}

.recorded-performance-table-wrap.slowest-events{
    max-height:calc(100vh - 430px);
}

.recorded-performance-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}

.recorded-performance-table th,
.recorded-performance-table td{
    padding:8px 10px;
    border-bottom:1px solid rgba(146,164,192,.12);
    text-align:left;
    white-space:nowrap;
}

.recorded-performance-table th{
    position:sticky;
    top:0;
    z-index:1;
    background:rgba(15,22,34,.96);
    color:#d7e5ff;
}

.recorded-performance-table tbody tr:hover{
    background:rgba(36,51,74,.35);
}

.recorded-performance-table .num,
.recorded-performance-table th.num{
    text-align:right;
    font-variant-numeric:tabular-nums;
}

.recorded-performance-table .stage-name{
    max-width:360px;
    overflow:hidden;
    text-overflow:ellipsis;
}

.recorded-performance-status-ok{
    color:#d7f7df;
    border-color:rgba(24,195,126,.45);
    background:rgba(24,195,126,.12);
}

.recorded-performance-status-error{
    color:#ffd0d0;
    border-color:rgba(214,80,80,.45);
    background:rgba(214,80,80,.12);
}


.suite-mode #tab-map{
    display:none;
}

.suite-mode .evaluation-tab[data-tab="map"]{
    display:none;
}

.suite-mode #tab-recorded-performance{
    display:none;
}

.suite-mode .evaluation-tab[data-tab="recorded-performance"]{
    display:none;
}

@media (max-width: 1400px){
    .recorded-performance-metric-grid{
        grid-template-columns:repeat(3, minmax(180px, 1fr));
    }
}

@media (max-width: 1100px){
    .recorded-performance-metric-grid{
        grid-template-columns:1fr;
    }
}

.evaluation-tab[hidden],
.evaluation-tab-panel[hidden]{
    display:none !important;
}

/* Maneuver coverage map */
.map-card{
    gap:12px;
    overflow:hidden;
}

.map-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
}

.map-subtitle{
    margin-top:4px;
    font-size:12px;
}

.map-mode-toggle{
    display:flex;
    gap:8px;
    flex:0 0 auto;
}

.map-mode-toggle .btn.active{
    border-color:var(--accent);
    background:rgba(119,167,255,.16);
}

.map-legend,
.map-stat-strip{
    display:flex;
    flex-wrap:wrap;
    gap:8px 12px;
    align-items:center;
    font-size:12px;
    color:var(--muted);
}

.map-stat-strip{
    border-top:1px solid rgba(146,164,192,.12);
    padding-top:10px;
}

.map-stat-strip strong{
    color:#d7e5ff;
}

.map-legend-line{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.zone-swatch,
.maneuver-swatch,
.route-swatch{
    width:14px;
    height:14px;
    border-radius:50%;
    display:inline-block;
    border:1px solid rgba(255,255,255,.28);
}

.route-swatch{
    width:24px;
    height:3px;
    border-radius:999px;
    border:0;
    background:rgba(120,200,255,.95);
}

.maneuver-swatch{
    background:rgba(255,220,120,.95);
}

.map-layout{
    display:grid;
    grid-template-columns:minmax(420px, 1.25fr) minmax(360px, .75fr);
    gap:12px;
    min-height:0;
}

.map-svg-wrap{
    border:1px solid rgba(146,164,192,.14);
    border-radius:14px;
    overflow:hidden;
    background:rgba(8,12,18,.95);
    min-height:480px;
}

.maneuver-map-svg{
    display:block;
    width:100%;
    height:auto;
    min-height:480px;
}

.map-bg{
    fill:rgba(8,12,18,.95);
}

.map-route{
    fill:none;
    stroke:rgba(120,200,255,.8);
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.map-maneuver circle{
    fill:rgba(255,220,120,.95);
    stroke:rgba(0,0,0,.55);
    stroke-width:1.5;
}

.map-zone-circle{
    stroke-width:3;
    fill-opacity:.14;
}

.map-zone-dot{
    stroke:rgba(0,0,0,.62);
    stroke-width:1.5;
}

.map-zone text{
    fill:rgba(255,255,255,.8);
    font:12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    paint-order:stroke;
    stroke:rgba(0,0,0,.75);
    stroke-width:3px;
}

.zone-hit .map-zone-circle,
.zone-hit .map-zone-dot,
.zone-hit .zone-swatch{ fill:rgba(24,195,126,.95); stroke:rgba(24,195,126,.95); background:rgba(24,195,126,.95); }
.zone-uncovered .map-zone-circle,
.zone-uncovered .map-zone-dot,
.zone-uncovered .zone-swatch{ fill:rgba(224,167,58,.95); stroke:rgba(224,167,58,.95); background:rgba(224,167,58,.95); }
.zone-missed .map-zone-circle,
.zone-missed .map-zone-dot,
.zone-missed .zone-swatch{ fill:rgba(214,80,80,.95); stroke:rgba(214,80,80,.95); background:rgba(214,80,80,.95); }
.zone-covered-no-expected-guide .map-zone-circle,
.zone-covered-no-expected-guide .map-zone-dot,
.zone-covered-no-expected-guide .zone-swatch{ fill:rgba(146,164,192,.85); stroke:rgba(146,164,192,.85); background:rgba(146,164,192,.85); }
.zone-covered-false-positive .map-zone-circle,
.zone-covered-false-positive .map-zone-dot,
.zone-covered-false-positive .zone-swatch{ fill:rgba(225,126,52,.95); stroke:rgba(225,126,52,.95); background:rgba(225,126,52,.95); }
.zone-unknown .map-zone-circle,
.zone-unknown .map-zone-dot,
.zone-unknown .zone-swatch{ fill:rgba(190,190,205,.7); stroke:rgba(190,190,205,.7); background:rgba(190,190,205,.7); }

.map-zone-list{
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:0;
}

.map-zone-list-title{
    font-weight:700;
    color:#d7e5ff;
    margin-bottom:8px;
}

.map-zone-table-wrap{
    overflow:auto;
    border:1px solid rgba(146,164,192,.12);
    border-radius:12px;
    max-height:520px;
}

.map-zone-table{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
}

.map-zone-table th,
.map-zone-table td{
    padding:7px 8px;
    border-bottom:1px solid rgba(146,164,192,.12);
    text-align:left;
    white-space:nowrap;
}

.map-zone-table th{
    position:sticky;
    top:0;
    background:rgba(15,22,34,.96);
    color:#d7e5ff;
    z-index:1;
}

.map-zone-table tbody tr:hover{
    background:rgba(36,51,74,.35);
}

.map-status-pill{
    display:inline-flex;
    align-items:center;
    padding:2px 7px;
    border-radius:999px;
    border:1px solid currentColor;
    text-transform:capitalize;
}

.map-empty{
    padding:14px;
    color:var(--muted);
}

.map-empty.small{
    padding:8px 0;
}

@media (max-width: 1300px){
    .map-layout{
        grid-template-columns:1fr;
    }
}

.link-button{
    border:0;
    padding:0;
    background:transparent;
    color:#d7e5ff;
    cursor:pointer;
    font:inherit;
    text-align:left;
    text-decoration:underline;
    text-underline-offset:2px;
}

.link-button:hover{
    color:#ffffff;
}


/* Recorded performance is a scrolling report, not a viewport-fitted viewer pane.
   Keep every card in the normal document flow so shared viewer/app.css flex rules
   cannot squeeze cards down to their headers. */
.evaluation-content > .evaluation-meta-strip,
.evaluation-content > .evaluation-tabs,
.evaluation-content > .evaluation-tab-panel.active{
    flex:0 0 auto;
}

.evaluation-tab-panel.active{
    min-height:auto;
    overflow:visible;
}

#tab-recorded-performance.active{
    display:flex;
    flex-direction:column;
    gap:12px;
    flex:0 0 auto;
    min-height:auto;
    overflow:visible;
}

#tab-recorded-performance .card,
#tab-recorded-performance .recorded-performance-card,
#tab-recorded-performance .recorded-performance-intro-card{
    flex:0 0 auto;
    min-height:auto;
    overflow:visible;
}

.recorded-performance-metric-grid{
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    align-items:stretch;
}

.recorded-performance-metric-grid > .recorded-performance-empty{
    grid-column:1 / -1;
}

.recorded-performance-metric-card{
    min-height:96px;
    height:auto;
}

.recorded-performance-table-wrap,
.recorded-performance-table-wrap.slowest-events{
    max-height:none;
    overflow:auto;
}

.recorded-performance-distribution-grid{
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
}

.recorded-performance-distribution-card{
    min-height:235px;
    height:auto;
}

.recorded-performance-lifecycle-chart{
    flex:0 0 auto;
    width:100%;
    height:520px;
    min-height:420px;
}

/* Functional evaluation overview */
.evaluation-app:not(.suite-mode) #tab-overview .score-grid{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.functional-comparison-section{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.functional-section-header{
    padding:2px 2px 0;
}

.functional-section-title{
    font-size:18px;
    font-weight:800;
    color:#d7e5ff;
}

.functional-section-description{
    font-size:12px;
    line-height:1.35;
    margin-top:3px;
}

.functional-comparison-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(320px, 1fr));
    gap:12px;
    align-items:start;
}

.functional-card{
    gap:8px;
    min-height:auto;
}

.functional-card.primary-card{
    border-color:rgba(119,167,255,.35);
    background:linear-gradient(180deg, rgba(119,167,255,.11), rgba(21,31,47,.92));
}

.functional-card.tertiary-card{
    opacity:.86;
}

.functional-card-title{
    font-weight:800;
    color:#d7e5ff;
    font-size:15px;
}

.functional-metric-list{
    display:flex;
    flex-direction:column;
    gap:0;
}

.functional-metric strong{
    text-align:right;
    max-width:52%;
}

@media (max-width:1100px){
    .functional-comparison-grid{
        grid-template-columns:1fr;
    }
}

.functional-score-line span{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}

.functional-score-line small{
    color:var(--muted);
    font-size:11px;
    line-height:1.25;
    font-weight:400;
}

.functional-score-line strong{
    text-align:right;
    max-width:45%;
    flex:0 0 auto;
}

/* Suite functional evaluation hierarchy */
.suite-mode .score-grid{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.suite-metric-section{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.suite-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    padding:2px 2px 0;
}

.suite-section-title{
    color:#d7e5ff;
    font-size:17px;
    font-weight:800;
}

.suite-section-subtitle,
.suite-section-note{
    color:var(--muted);
    font-size:12px;
    line-height:1.35;
    margin-top:3px;
}

.suite-single-card,
.suite-comparison-row{
    display:grid;
    grid-template-columns:repeat(2, minmax(280px, 1fr));
    gap:12px;
}

.suite-single-card{
    grid-template-columns:1fr;
}

.suite-comparison-card{
    min-height:0;
}

.suite-metric-section.secondary{
    opacity:.88;
}

@media (max-width: 1100px){
    .suite-comparison-row,
    .suite-single-card{
        grid-template-columns:1fr;
    }

    .suite-section-head{
        align-items:flex-start;
        flex-direction:column;
    }
}

.suite-distribution-card{
    overflow:hidden;
}

.suite-distribution-table-wrap{
    overflow-x:auto;
    margin-top:6px;
}

.suite-distribution-table{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
    min-width:560px;
}

.suite-distribution-table th,
.suite-distribution-table td{
    padding:7px 8px;
    border-bottom:1px solid var(--border);
    text-align:right;
    white-space:nowrap;
}

.suite-distribution-table th:first-child,
.suite-distribution-table td:first-child{
    text-align:left;
    white-space:normal;
    min-width:150px;
}

.suite-distribution-table th{
    color:#d7e5ff;
    font-weight:700;
    background:rgba(255,255,255,.025);
}

.suite-distribution-table td{
    color:#f3f7ff;
}

.utility-diagnostics-card{
    max-height:440px;
    overflow:auto;
}

.utility-diagnostics-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.utility-zone-tally{
    margin-top:2px;
    margin-bottom:10px;
}

.utility-zone-row{
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:10px 12px;
    border-radius:8px;
    font-size:12px;
    line-height:1.4;
}

.utility-zone-hit{
    border:1px solid rgba(74,222,128,.24);
    background:rgba(74,222,128,.055);
}

.utility-zone-miss{
    border:1px solid rgba(248,113,113,.28);
    background:rgba(248,113,113,.075);
}

.utility-zone-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.utility-zone-value{
    overflow-wrap:anywhere;
}

.utility-label{
    color:#a9bddb;
    font-weight:700;
}

.utility-atom{
    display:inline-block;
    padding:1px 5px;
    border:1px solid rgba(169,189,219,.2);
    border-radius:4px;
    background:rgba(0,0,0,.18);
    color:#eef5ff;
    font-size:11px;
    line-height:1.45;
}

.utility-or{
    color:#7f93b2;
    font-size:11px;
}

.utility-emission-details{
    margin-top:3px;
    font-size:10px;
}