/* The context breakdown. A separate file rather than a tail on style.css: two windows of the
   panel edit one and the same project in parallel, and 82k of a shared file is the most expensive
   place for an accidental overwrite.

   Not one hard-wired colour: only the tokens that themes.js extends
   (--bg/--bg-2/--bg-3/--bg-4, --tx/--tx-2/--tx-3, --line/--line-2, --acc/--on-acc,
   --ok/--warn/--think, --mono/--sans, --shadow, --veil). Foreign names such as --panel or
   --muted silently give a transparent background and invisible text in half of the ten palettes. */

/* .modal-back is display:grid by default — the overlay must be hidden by ITS OWN id,
   otherwise it intercepts clicks over the whole page while being «closed». */
#ctxmap { display: none; z-index: 200; }
#ctxmap.open { display: grid; }

#ctxmap .ctxmap-win {
  position: relative;                 /* an anchor for the source viewer (inset: 0) */
  width: min(920px, calc(100vw / var(--ui-scale, 1) - 40px));
  max-height: calc(100svh / var(--ui-scale, 1) - 40px);
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  color: var(--tx);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: 0 30px 80px var(--shadow);
  overflow: hidden;
}

#ctxmap .ctxmap-top {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
  background: var(--bg-3);
}
#ctxmap .ctxmap-top b { font: 600 14px var(--sans); }
#ctxmap .grow { flex: 1; min-width: 0; }

#ctxmap-body { overflow: auto; padding: 14px 16px; flex: 1; }

.ctxmap-head { text-align: center; padding: 6px 0 14px; }
.ctxmap-big { font: 600 46px var(--mono); color: var(--acc-2); line-height: 1; }
.ctxmap-sub { font-size: 12.5px; color: var(--tx-3); margin-top: 6px; }

.ctxmap-price { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.ctxmap-price .cx-cell {
  flex: 1 1 150px; min-width: 130px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 11px;
}
.ctxmap-price .cx-cell b { display: block; font: 600 18px var(--mono); color: var(--tx); }
.ctxmap-price .cx-cell span { display: block; font-size: 11px; color: var(--tx-3); margin-top: 3px; line-height: 1.35; }
.ctxmap-price .cx-cell.good b { color: var(--ok); }
.ctxmap-price .cx-cell.warn b { color: var(--warn); }

.ctxmap-note {
  font-size: 12px; line-height: 1.55; color: var(--tx-3);
  border-left: 2px solid var(--line-2); padding: 3px 0 3px 11px; margin-bottom: 14px;
}

.ctxmap-ord { display: flex; gap: 6px; margin-bottom: 14px; }
.ctxmap-ord .ord-btn {
  font: 12px var(--sans); cursor: pointer;
  background: transparent; color: var(--tx-3);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px;
}
.ctxmap-ord .ord-btn:hover { color: var(--tx); border-color: var(--line-2); }
.ctxmap-ord .ord-btn.on { background: var(--acc); color: var(--on-acc); border-color: transparent; }

.cx-group { margin-bottom: 20px; }
.cx-ghead { display: flex; align-items: baseline; gap: 10px; padding: 0 2px 7px; border-bottom: 1px solid var(--line); }
.cx-gtitle { font: 600 13px var(--sans); flex: 1; }
.cx-gval { font: 600 13px var(--mono); color: var(--acc-2); }
.cx-gnote { font-size: 11.5px; line-height: 1.5; color: var(--tx-3); padding: 7px 2px 3px; }

.cx-turn {
  font: 10px var(--sans); letter-spacing: .9px; text-transform: uppercase; color: var(--tx-3);
  margin: 12px 0 4px; padding-left: 2px;
}

.cx-row {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 5px 7px; border: 0; border-radius: 8px;
  background: transparent; color: var(--tx-2); text-align: left; cursor: pointer;
  font: 12.5px var(--sans);
}
.cx-row:hover { background: var(--bg-3); color: var(--tx); }
.cx-ico { width: 17px; text-align: center; opacity: .75; flex: none; }
.cx-mid { flex: 1; min-width: 0; }
.cx-label { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-sub { display: block; font: 11px var(--mono); color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-track { width: 92px; height: 6px; border-radius: 3px; background: var(--bg-4); overflow: hidden; flex: none; }
.cx-track i { display: block; height: 100%; background: var(--acc); }
.cx-val { width: 54px; text-align: right; font: 12px var(--mono); color: var(--tx-2); flex: none; }

/* A bar's colour is the answer to «and what was this in the first place»: the model's work, data
   from the disk or a tool's output. Identical bars force you to read the caption of every row. */
.cx-think .cx-track i, .cx-answer .cx-track i { background: var(--think); }
.cx-result .cx-track i, .cx-call .cx-track i { background: var(--warn); }
.cx-file .cx-track i, .cx-skill .cx-track i { background: var(--ok); }
.cx-ask .cx-track i, .cx-inject .cx-track i { background: var(--blue); }

/* ── the source viewer ─────────────────────────────────────────────────── */
#ctxmap-src {
  position: absolute; inset: 0;
  display: none; flex-direction: column;
  background: var(--bg-2);
}
#ctxmap-src.open { display: flex; }
#ctxmap-src .ctxsrc-top {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: var(--bg-3);
}
#ctxsrc-title { font: 600 13px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ctxsrc-sub { font: 11px var(--mono); color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ctxsrc-body {
  flex: 1; overflow: auto; margin: 0; padding: 13px 15px;
  font: 12px/1.55 var(--mono); color: var(--tx-2);
  white-space: pre-wrap; word-break: break-word;
  background: var(--bg);
}

@media (max-width: 860px) {
  #ctxmap { padding: 0; }
  #ctxmap .ctxmap-win {
    width: calc(100vw / var(--ui-scale, 1));
    max-height: calc(100svh / var(--ui-scale, 1));
    height: calc(100svh / var(--ui-scale, 1));
    border-radius: 0; border: 0;
  }
  .ctxmap-big { font-size: 36px; }
  .cx-track { width: 46px; }
  .cx-val { width: 46px; }
}