/* /training page: fleet strip + act-sectioned encounter table (grid on wide, cards on
 * narrow) + regret sparklines. Colors: status uses the xlsx semantics (green certified /
 * amber in-flight / gray queued) but NEVER color-alone — every row carries its status
 * text. Chart hues are the site's validated pair (#1e88d6 live, #e06a1a candidate). */

.fleet-strip{display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 18px}
.fleet-box{display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px;
  background:var(--panel); border:1px solid var(--line); font-size:12.5px; color:var(--muted)}
.fleet-box b{color:var(--ink)}
.fleet-box .fb-name{font-variant-numeric:tabular-nums}
.fleet-box.down{opacity:.55; border-style:dashed}

.act-head{margin:26px 0 8px; font-size:14px; font-weight:800; color:var(--ink);
  letter-spacing:.08em; text-transform:uppercase}
.act-head .act-sub{font-weight:500; color:var(--faint); letter-spacing:0; text-transform:none;
  margin-left:8px; font-size:12px}

/* wide: grid rows */
.enc-grid{display:grid; grid-template-columns:44px minmax(160px,1.4fr) 66px 96px 110px 88px 150px 90px 118px; gap:0 10px; align-items:center}
.enc-grid .eg-h{font-size:10.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.1em;
  padding:4px 0 6px; border-bottom:1px solid var(--line)}
.enc-row{display:contents; cursor:pointer}
.enc-row > span{padding:7px 0; border-bottom:1px solid rgba(255,255,255,.05); font-size:12.5px;
  color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.enc-row:hover > span{background:rgba(255,255,255,.03)}
.enc-row .er-id{color:var(--faint); font-variant-numeric:tabular-nums}
.enc-row .er-name{color:var(--ink); font-weight:650}
.enc-row .er-num{font-variant-numeric:tabular-nums; text-align:right}
.enc-row .er-spark{padding-top:4px; padding-bottom:2px}
.enc-row .er-model{display:flex; align-items:center; justify-content:flex-end; gap:6px}

/* trained-model version signifier: short md5 + a badge that only lights up green when the
   specialist carries the aux-heads ("vision") slate (build_training_feed.py's read_specialist_version) */
.model-md5{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:11px;
  color:var(--muted)}
.model-md5-unknown{color:var(--faint); font-style:italic}
.vision-badge{display:inline-block; padding:1px 7px; border-radius:999px; font-size:10px;
  font-weight:700; letter-spacing:.02em; background:rgba(255,255,255,.05); color:var(--faint);
  border:1px solid var(--line2)}
.vision-badge.on{background:rgba(47,166,106,.16); color:#5fd39a; border:1px solid rgba(47,166,106,.45)}

.status-pill{display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700}
.status-pill.certified{background:rgba(47,166,106,.16); color:#5fd39a; border:1px solid rgba(47,166,106,.45)}
.status-pill.in_flight{background:rgba(224,160,26,.13); color:#e8b95c; border:1px solid rgba(224,160,26,.4)}
.status-pill.needs_confirm{background:rgba(224,160,26,.09); color:#cfa86a; border:1px dashed rgba(224,160,26,.4)}
.status-pill.queued{background:rgba(255,255,255,.05); color:var(--faint); border:1px solid var(--line2)}

.spark-t{width:120px; height:26px; display:block}
.spark-t .sp-live{fill:none; stroke:#1e88d6; stroke-width:1.6}
.spark-t .sp-death{fill:#e06a1a}
.spark-none{color:var(--faint); font-size:11px}

/* narrow: collapse to cards */
@media (max-width:860px){
  .enc-grid{display:block}
  .enc-grid .eg-h{display:none}
  .enc-row{display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:10px 12px;
    margin-bottom:8px; background:var(--panel); border:1px solid var(--line); border-radius:12px}
  .enc-row > span{border-bottom:none; padding:1px 0; white-space:normal}
  .enc-row .er-id{display:none}
  .enc-row .er-name{grid-column:1; font-size:14px}
  .enc-row .er-status{grid-column:2; grid-row:1; justify-self:end}
  .enc-row .er-num{text-align:left}
  .enc-row .er-spark{grid-column:1 / -1}
  .fleet-strip{gap:8px}
}

/* detail modal */
.td-title{font-size:20px; font-weight:800; color:var(--ink)}
.td-sub{font-size:12.5px; color:var(--muted); margin:2px 0 14px}
.td-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.td-chart{margin:14px 0; position:relative}
.td-chart-title{font-size:12.5px; font-weight:650; color:var(--ink); margin-bottom:4px}
.td-legend{display:flex; gap:14px; font-size:11.5px; color:var(--muted); margin-bottom:6px}
.td-legend .lg-dot{display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px; vertical-align:-1px}
.td-svg{width:100%; display:block; background:var(--panel); border:1px solid var(--line); border-radius:10px}
.td-table{width:100%; border-collapse:collapse; font-size:12px; margin-top:12px}
.td-table th{color:var(--faint); text-transform:uppercase; font-size:10px; letter-spacing:.08em;
  text-align:right; padding:4px 8px; border-bottom:1px solid var(--line)}
.td-table th:first-child, .td-table td:first-child{text-align:left}
.td-table td{color:var(--muted); text-align:right; padding:4px 8px; font-variant-numeric:tabular-nums;
  border-bottom:1px solid rgba(255,255,255,.05)}
.td-tip{position:absolute; transform:translate(-50%,-130%); pointer-events:none;
  background:var(--panel2, #1b2130); border:1px solid var(--line2); border-radius:8px;
  padding:3px 8px; font-size:11px; color:var(--ink); white-space:nowrap}