/* ============================================================
   coach.css — Agentic coaching layer for Pitwall i2.
   A 5th worksheet ("Coach") plus lightweight finding markers
   overlaid on the graph + track maps. Reuses analysis.css tokens.
   ============================================================ */

/* agent accent tokens (mirror channel palette) */
:root{
  --ag-txt:#cfd4d7;
  --ag-sec:#34d2e3;
  --ag-brk:#ff463a;
  --ag-spd:#ffd23b;
  --ag-thr:#39d46a;
  --ag-ger:#4db5ff;
  --ag-grp:#b388ff;
  --ag-cns:#ffae3b;
}

/* the coach worksheet uses the same two-pane shell as the others */
#ws-coach .pane{background:var(--bg)}

/* ============== CHIEF ENGINEER BANNER ============== */
.chief{padding:12px 15px;display:flex;flex-direction:column;gap:12px}
.cf-head{display:flex;align-items:center;gap:30px}
.cf-big{display:flex;flex-direction:column;gap:2px;flex:0 0 auto}
.cf-num{font-family:var(--mono);font-size:38px;font-weight:700;line-height:.9;color:var(--accent);letter-spacing:-.01em}
.cf-num .s{font-size:20px;color:var(--ink-dim);font-weight:500;margin-left:2px}
.cf-cap{font-size:10px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.14em}
.cf-sub{display:grid;grid-template-columns:repeat(4,auto);gap:3px 34px}
.cf-kv{display:flex;flex-direction:column;gap:2px}
.cf-kv .k{font-size:9.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em}
.cf-kv .v{font-family:var(--mono);font-size:14px;color:var(--ink)}
.cf-kv .v.lose{color:var(--c-brk)}
.cf-kv .v.gain{color:var(--c-thr)}

.cf-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line-soft);padding-top:11px}
.cf-lbl{font-size:9.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.14em;margin-right:2px}
.cf-act{display:inline-flex;align-items:center;gap:9px;background:var(--chrome-2);border:1px solid var(--line);
  border-radius:6px;padding:6px 12px 6px 6px;cursor:pointer;transition:background .1s,border-color .1s}
.cf-act:hover{background:var(--chrome-3);border-color:var(--raise)}
.cf-act .rank{width:19px;height:19px;border-radius:4px;background:var(--accent);color:#160f06;font-family:var(--mono);
  font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.cf-act .cn{font-family:var(--mono);font-weight:700;color:var(--accent);font-size:14px}
.cf-act .why{font-size:11.5px;color:var(--ink-dim);max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-act .gain{font-family:var(--mono);font-size:12.5px;color:var(--c-brk);font-weight:500}

/* ---- driver KPIs ---- */
.cf-kpis{border-top:1px solid var(--line-soft);padding-top:11px;display:flex;flex-direction:column;gap:9px}
.cf-kpis .cf-lbl em{font-style:normal;color:var(--ink-ghost);letter-spacing:.04em;margin-left:6px}
.kpi-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.kpi{background:var(--chrome-2);border:1px solid var(--line);border-radius:6px;padding:8px 11px;display:flex;flex-direction:column;gap:3px}
.kpi-lab{font-size:10.5px;color:var(--ink-dim);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-val{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--ink);line-height:1}
.kpi-val .u{font-size:11px;color:var(--ink-faint);font-weight:400;margin-left:2px}
.kpi-val.good{color:var(--c-thr)}
.kpi-val.bad{color:var(--c-brk)}
.kpi-cmp{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:10.5px}
.kpi-cmp .r{color:var(--ink-faint)}
.kpi-cmp .d{color:var(--ink-dim);font-weight:600}
.kpi-cmp .d.good{color:var(--c-thr)}
.kpi-cmp .d.bad{color:var(--c-brk)}

/* ============== LAP WALKTHROUGH (TURN BY TURN) ============== */
.walkthrough{flex:1;min-height:0;overflow-y:auto;padding:12px 15px 18px;display:flex;flex-direction:column;gap:9px}
.wt-row{display:grid;grid-template-columns:30px 1fr;align-items:stretch}
.wt-node{position:relative;display:flex;justify-content:center;padding-top:13px}
.wt-node::before{content:"";position:absolute;left:50%;top:0;bottom:-9px;width:2px;margin-left:-1px;background:var(--line-soft)}
.wt-row:last-child .wt-node::before{bottom:50%}
.wt-dot{position:relative;z-index:2;width:13px;height:13px;border-radius:50%;border:2px solid var(--bg);
  background:var(--ink-faint);box-shadow:0 0 0 1px var(--line)}
.wt-row.lose .wt-dot{background:var(--c-brk)}
.wt-row.gain .wt-dot{background:var(--c-thr)}
.wt-row.sel .wt-dot{box-shadow:0 0 0 4px rgba(255,146,52,.25);outline:1px solid var(--accent)}

.wt-card{background:var(--chrome);border:1px solid var(--line);border-radius:6px;padding:10px 13px;
  cursor:pointer;transition:border-color .1s,background .1s}
.wt-card:hover{border-color:var(--raise);background:var(--chrome-2)}
.wt-row.sel .wt-card{border-color:var(--accent);background:rgba(255,146,52,.06)}
.wt-row.dim{opacity:.4}

.wt-top{display:flex;align-items:center;gap:11px}
.wt-id{display:flex;align-items:baseline;gap:9px;flex:1;min-width:0}
.wt-label{font-family:var(--mono);font-weight:700;font-size:16px;color:var(--ink)}
.wt-type{font-size:11px;color:var(--ink-dim)}
.wt-sec{font-family:var(--mono);font-size:10px;color:var(--ink-faint);border:1px solid var(--line);border-radius:3px;padding:1px 5px}
.wt-dist{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);margin-left:auto}
.wt-graph{flex:0 0 auto;font-family:var(--mono);font-size:10px;color:var(--ink-faint);border:1px solid var(--line);
  background:var(--chrome-2);border-radius:4px;padding:3px 7px;cursor:pointer;transition:color .1s,border-color .1s}
.wt-graph:hover{color:var(--accent);border-color:var(--accent)}
.wt-delta{font-family:var(--mono);font-size:17px;font-weight:700;flex:0 0 auto;min-width:74px;text-align:right}
.wt-delta .u{font-size:11px;font-weight:500;color:var(--ink-faint);margin-left:1px}
.wt-delta.lose{color:var(--c-brk)}
.wt-delta.gain{color:var(--c-thr)}
.wt-delta.flat{color:var(--ink-dim)}

.wt-speed{display:flex;align-items:center;gap:11px;margin-top:9px}
.wt-speed .lab{font-size:9.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;flex:0 0 58px}
.wt-bar{flex:1;height:8px;background:var(--grid-2);border:1px solid var(--line-soft);border-radius:2px;position:relative;overflow:hidden}
.wt-bar .main{position:absolute;left:0;top:0;bottom:0;background:rgba(255,210,59,.30);border-right:2px solid var(--c-speed)}
.wt-bar .ref{position:absolute;left:0;top:0;bottom:0;border-right:2px dashed var(--c-lat)}
.wt-vals{font-family:var(--mono);font-size:12px;flex:0 0 168px;text-align:right;color:var(--ink-dim)}
.wt-vals b{color:var(--c-speed);font-weight:600}
.wt-vals .r{color:var(--ink-faint)}
.wt-vals .d{margin-left:7px}
.wt-vals .d.lose{color:var(--c-brk)}
.wt-vals .d.gain{color:var(--c-thr)}

.wt-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.wt-empty{font-size:11px;color:var(--ink-faint);font-style:italic;margin-top:9px}
.wt-chip{display:inline-flex;align-items:center;gap:8px;background:var(--chrome-2);border:1px solid var(--line);
  border-radius:5px;padding:4px 9px 4px 4px;cursor:pointer;color:var(--ink-dim);transition:background .1s,border-color .1s,color .1s}
.wt-chip:hover{background:var(--chrome-3);border-color:var(--raise);color:var(--ink)}
.wt-chip.dim{opacity:.32}
.wt-chip.lockup{border-color:rgba(255,70,58,.45)}
.wt-chip .ag{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.02em;color:#0a0c0e;
  padding:3px 4px;border-radius:3px;flex:0 0 auto}
.wt-chip .tx{font-size:11.5px;white-space:nowrap}
.wt-chip .t{font-family:var(--mono);font-size:11px;color:var(--c-brk)}
.wt-chip .t.var{color:var(--ag-cns)}

/* ============== AGENT ROSTER ============== */
.agents{flex:1;min-height:0;overflow-y:auto;padding:9px;display:flex;flex-direction:column;gap:6px}
.ag-all{display:flex;align-items:center;justify-content:space-between;padding:7px 11px;border:1px dashed var(--line);
  border-radius:6px;background:transparent;cursor:pointer;color:var(--ink-dim);font-size:11px;letter-spacing:.04em;
  text-transform:uppercase}
.ag-all:hover{border-color:var(--raise);color:var(--ink)}
.ag-all.on{border-style:solid;border-color:var(--accent);color:var(--accent)}
.ag-all .cnt{font-family:var(--mono)}

.ag-row{display:grid;grid-template-columns:36px 1fr auto;gap:11px;align-items:center;padding:8px 10px;
  background:var(--chrome);border:1px solid var(--line-soft);border-radius:6px;cursor:pointer;text-align:left;
  transition:background .1s,border-color .1s}
.ag-row:hover{background:var(--chrome-2);border-color:var(--line)}
.ag-row.on{border-color:var(--accent);background:rgba(255,146,52,.07)}
.ag-row.muted{opacity:.5}
.ag-row.off{cursor:default;opacity:.45}
.ag-row.off:hover{background:var(--chrome);border-color:var(--line-soft)}
.ag-code{height:34px;border-radius:5px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;font-weight:700;color:#0a0c0e;letter-spacing:.01em}
.ag-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.ag-name{font-size:12.5px;color:var(--ink);font-weight:600}
.ag-watch{font-size:10px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-stat{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:0 0 auto}
.ag-stat .n{font-family:var(--mono);font-size:16px;color:var(--ink);line-height:1}
.ag-stat .n.zero{color:var(--ink-ghost)}
.ag-stat .tm{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint)}
.ag-stat .tm.has{color:var(--c-brk)}

/* ============== FINDINGS MAP ============== */
#cx-map{cursor:pointer}
.cx-map-foot{position:absolute;left:11px;right:11px;bottom:9px;display:flex;justify-content:space-between;
  gap:12px;font-family:var(--mono);font-size:11px;color:var(--ink-dim);pointer-events:none}
.cx-map-foot b{color:var(--accent);font-weight:500}
.cx-map-foot .r{color:var(--ink-faint)}

/* ============== OVERLAY MARKERS (other worksheets) ============== */
.cx-markers{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.cx-flag{position:absolute;top:18px;transform:translateX(-50%);pointer-events:auto;cursor:pointer;
  font-family:var(--mono);font-size:9px;font-weight:700;line-height:1;letter-spacing:.02em;
  padding:3px 5px;border-radius:3px;border:1px solid;background:rgba(8,10,12,.9);transition:transform .08s}
.cx-flag::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:9px;margin-left:-.5px;background:currentColor;opacity:.5}
.cx-flag:hover{transform:translateX(-50%) translateY(-1px)}
.cx-flag.lose{color:#ff5a4e;border-color:rgba(255,70,58,.55)}
.cx-flag.gain{color:#4ade7e;border-color:rgba(57,212,106,.55)}
.cx-flag.flat{color:var(--ink-faint);border-color:var(--line)}
.cx-flag.sel{background:var(--accent);color:#160f06;border-color:var(--accent)}
.cx-flag.sel::after{background:var(--accent);opacity:.8}

.cx-mapmarks{position:absolute;inset:0;pointer-events:none;z-index:4}
.cx-dot{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;border-radius:50%;
  border:1.5px solid #0a0c0e;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.cx-dot.lose{background:#ff463a}
.cx-dot.gain{background:#39d46a}
.cx-dot.flat{background:#6b7276}
.cx-dot.sel{outline:2px solid var(--accent);outline-offset:1px;z-index:5}
.cx-dot.muted{opacity:.28}
.cx-dot .lbl{position:absolute;left:50%;top:-16px;transform:translateX(-50%);font-family:var(--mono);
  font-size:9px;font-weight:700;color:var(--ink-dim);white-space:nowrap}