/* callers view styles. Owner: callers engineer. Base tokens and shared components: base.css.
   Every class here is prefixed cl- so it cannot leak into other views. */

/* ---------- head: verdict + counts ---------- */
.cl-head { display: flex; flex-direction: column; gap: 10px; padding: 2px 0 2px; }
.cl-head .verdict { font-size: 16px; max-width: 86ch; }
.cl-head .stats { gap: 6px 26px; }
.cl-head .stat-value { font-size: 14px; }

/* ---------- layout ---------- */
.cl-layout { gap: var(--gap); }
.cl-side { gap: var(--gap); }
.cl-main .pane-head { min-height: 48px; }

/* ---------- funnel ---------- */
.cl-funnel { min-height: 300px; margin-top: 2px; }
.cl-funnel-svg { display: block; overflow: visible; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.cl-axis text { font-size: 11px; }
.cl-axis-title { fill: var(--text-2); font-family: var(--font-ui); font-size: 11.5px; }
/* label halos: a soft, half-transparent page-colour stroke keeps text clear of grid and curve lines
   without the hard dark outline a solid halo draws on the grey luck band */
.cl-curve-label { fill: var(--text-2); font-family: var(--font-mono); font-size: 10.5px; paint-order: stroke; stroke: var(--bg); stroke-opacity: .55; stroke-width: 2.5px; stroke-linejoin: round; }
.cl-dot-label {
  font-family: var(--font-mono); font-size: 11px; fill: var(--text-2);
  paint-order: stroke; stroke: var(--bg); stroke-opacity: .55; stroke-width: 2.5px; stroke-linejoin: round; pointer-events: none;
}
.cl-dot-label--beyond { fill: var(--text); }
.cl-dot-label--promising { fill: var(--blue-4); }
.cl-dot-label--below { fill: var(--sienna); }
.cl-empty-label { fill: var(--text-3); font-family: var(--font-ui); font-size: 13px; }
.cl-overlay { outline: none; }
.cl-leader { pointer-events: none; }
.cl-funnel-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--grid);
}
.cl-foot-note { margin: 0; color: var(--text-3); font-size: var(--fs-small); }
p.cl-foot-note { margin-top: 12px; }
.cl-thin { margin: 12px 0 0; color: var(--text-2); font-size: 12px; }
.cl-main .empty { margin-top: 14px; }

/* ---------- consistency matrix ---------- */
.cl-main .stats { margin: 2px 0 12px; }
.cl-matrix-legend { margin: 0 0 12px; gap: 6px 14px; }
.cl-matrix .tbl th.cl-wcol { text-transform: none; letter-spacing: 0; font-family: var(--font-mono); }
.cl-matrix .tbl td.cl-wcol { padding-left: 3px; padding-right: 3px; }
.cl-matrix .tbl th.cl-wcol, .cl-matrix .tbl td.cl-wcol { text-align: center; }
.cl-matrix .tbl td { white-space: nowrap; padding-top: 4px; padding-bottom: 4px; }
.cl-matrix .tbl th { padding-top: 6px; padding-bottom: 6px; }

.cl-cell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; height: 22px; padding: 0 5px; border-radius: 3px; border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--fs-small); font-variant-numeric: tabular-nums;
  color: var(--text-2); background: transparent; line-height: 1;
}
.cl-cell--sample { min-width: 38px; height: 18px; font-size: 10px; cursor: default; }
.cl-cell--nc { border-color: var(--line); background-image: repeating-linear-gradient(45deg, var(--hatch) 0 1px, transparent 1px 5px); }
.cl-cell--zero { color: var(--text-3); border-color: var(--grid); }
.cl-cell--thin { color: var(--text-3); border-color: var(--grid); }
.cl-cell--luck { color: var(--text); border-color: var(--band-edge); background: var(--chip); }
.cl-cell--below { color: var(--sienna); border-color: #6B4632; background: var(--chip); }
.cl-cell--promising { color: var(--blue); border-color: var(--blue-2); background: transparent; }
.cl-cell--beyond { color: var(--white); border-color: var(--blue); background: var(--blue-2); }
/* partial window: an amber corner mark, independent of the state colouring */
.cl-cell--partial::after {
  content: ''; position: absolute; top: -1px; right: -1px; width: 0; height: 0;
  border-top: 6px solid var(--amber); border-left: 6px solid transparent; border-top-right-radius: 3px;
}

/* ---------- side lists ---------- */
.cl-list .pane-body { padding-top: 0; }
.cl-list .tbl td, .cl-list .tbl th { padding-left: 8px; padding-right: 8px; }
.cl-list .tbl td:first-child, .cl-list .tbl th:first-child { padding-left: 0; padding-right: 0; width: 18px; }
.cl-list .tbl-more { padding: 8px 0 0; }

/* ---------- coverage box ---------- */
.cl-cov { display: flex; flex-direction: column; gap: 14px; }
.cl-cov .kv { gap: 8px 16px; }
.cl-wrap { font-family: var(--font-mono); font-size: var(--fs-mono); font-variant-numeric: tabular-nums; white-space: normal; }
.cl-cov-wins { display: flex; flex-direction: column; gap: 6px; }
.cl-cov-label { color: var(--text-2); font-size: 12px; }
.cl-cov-wins .win { min-width: 46px; }
.cl-cov-hint { color: var(--text-3); font-size: var(--fs-small); }
.cl-gaps { margin: 0; padding: 10px 0 0 0; list-style: none; border-top: 1px solid var(--grid); display: flex; flex-direction: column; gap: 4px; }
.cl-gaps li { color: var(--text-2); font-size: 12px; padding-left: 14px; position: relative; }
.cl-gaps li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 5px; height: 5px; border-radius: 1px; background: var(--amber); opacity: .8; }

/* ---------- narrow ---------- */
@media (max-width: 720px) {
  .cl-head .verdict { font-size: 15px; }
  .cl-head .stats { gap: 6px 18px; }
  .cl-funnel { min-height: 260px; }
  .cl-funnel-foot .legend { gap: 4px 10px; }
  /* the matrix scrolls sideways on phones: keep the handle in view */
  .cl-matrix .tbl th:nth-child(2), .cl-matrix .tbl td:nth-child(2) {
    position: sticky; left: 0; z-index: 1; background: var(--bg); box-shadow: inset -1px 0 0 var(--grid);
  }
  .cl-matrix .tbl tbody tr:hover td:nth-child(2) { background: var(--chip); }
}

/* ---------- funnel keyboard marks: invisible until focused, then a white ring with a dark halo ---------- */
.cl-mark { fill: transparent; stroke: none; pointer-events: none; outline: none; }
.cl-mark:focus { stroke: var(--white); stroke-width: 2px; filter: drop-shadow(0 0 1.5px var(--bg)) drop-shadow(0 0 1px var(--bg)); }
@media (max-width: 720px) {
  .cl-matrix .tbl th.cl-vcol, .cl-matrix .tbl td.cl-vcol { padding-left: 4px; padding-right: 4px; letter-spacing: 0; }
}