/* ─────────────────────────────────────────────────────────────────────────
   Claims Grade per-instrument detail panel — shared styles.
   Single source of truth for the .cgi-* panel rendered by claims-grade-panel.js.
   Consumed by /claims-grade/ (full multi-company panel) and the /credit/ modal
   Grade tab (single-company panel, target instrument highlighted).

   var() references carry the /claims-grade/ palette as fallbacks, so the panel
   renders identically where those vars are defined (claims-grade) and keeps its
   own look where they are not (the credit page, whose token names differ).
   Letter/severity colors are the canonical design tokens, stated literally.
   ───────────────────────────────────────────────────────────────────────── */

.cgi-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.4rem;
  color: var(--text2, #8585A0);
  margin: 8px 0 0;
}
.cgi-company {
  background: var(--bg-card, #111111);
  border: 1px solid var(--border, #1C1C28);
  border-radius: 12px;
  padding: 24px;
  margin-top: 20px;
  scroll-margin-top: 88px;
}
.cgi-co-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border, #1C1C28);
}
.cgi-co-letter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 4.4rem;
  font-weight: 700;
  line-height: 1;
}
.cgi-co-letter.cg-a { color: #22c55e; }
.cgi-co-letter.cg-b { color: #F7931A; }
.cgi-co-letter.cg-c { color: #d4a23c; }
.cgi-co-letter.cg-d { color: #ef4444; }
.cgi-co-meta { display: flex; flex-direction: column; gap: 2px; }
.cgi-co-name { font-size: 1.9rem; font-weight: 700; color: var(--text, #E4E4EC); line-height: 1.2; }
.cgi-co-ticker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.2rem; font-weight: 600; letter-spacing: 0.08em; color: var(--text3, #505068);
}
.cgi-co-word {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem; font-weight: 600; letter-spacing: 0.05em; color: var(--text2, #8585A0); margin-top: 4px;
}
.cgi-co-def { font-size: 1.4rem; color: var(--text2, #8585A0); line-height: 1.5; margin-top: 14px; }

/* Face-weighted rollup bar with the D-cap line */
.cgi-bar-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text3, #505068); margin: 20px 0 8px;
}
.cgi-bar {
  position: relative;
  display: flex;
  width: 100%;
  height: 26px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--bg-card2, #16161F);
}
.cgi-bar-seg { height: 100%; min-width: 2px; }
.cgi-bar-seg.cg-a { background: #22c55e; }
.cgi-bar-seg.cg-b { background: #F7931A; }
.cgi-bar-seg.cg-c { background: #d4a23c; }
.cgi-bar-seg.cg-d { background: #ef4444; }
.cgi-dcap {
  position: absolute; top: -4px; bottom: -4px; left: 50%;
  width: 0; border-left: 2px dashed var(--text, #E4E4EC);
  pointer-events: none;
}
.cgi-dcap-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.05rem; color: var(--text3, #505068); margin-top: 6px;
}
.cgi-dcap-note .cgi-dcap-flag { color: #ef4444; font-weight: 600; }

/* Per-instrument rows with anchors + dimension indicators */
.cgi-inst {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border, #1C1C28);
  scroll-margin-top: 88px;
}
.cgi-inst:last-child { border-bottom: none; }
.cgi-inst.cgi-target { background: var(--btc-glow, #F7931A18); border-radius: 8px; padding: 16px 14px; }
.cgi-inst-name { font-size: 1.55rem; font-weight: 600; color: var(--text, #E4E4EC); line-height: 1.3; }
.cgi-inst-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem; color: var(--text3, #505068); letter-spacing: 0.04em;
}
.cgi-inst-grade {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.6rem; font-weight: 700; text-align: right; white-space: nowrap;
}
.cgi-inst-grade.cg-a { color: #22c55e; }
.cgi-inst-grade.cg-b { color: #F7931A; }
.cgi-inst-grade.cg-c { color: #d4a23c; }
.cgi-inst-grade.cg-d { color: #ef4444; }
.cgi-dims {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.cgi-dim {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.15rem;
  color: var(--text2, #8585A0);
  background: var(--bg-card2, #16161F);
  border: 1px solid var(--border, #1C1C28);
  border-radius: 5px;
  padding: 3px 8px;
}
.cgi-dim-k { color: var(--text3, #505068); letter-spacing: 0.04em; }
.cgi-dim-v { font-weight: 700; }
/* severity ramp: 0 best -> 3 worst */
.cgi-sev-0 .cgi-dim-v { color: #22c55e; }
.cgi-sev-1 .cgi-dim-v { color: #F7931A; }
.cgi-sev-2 .cgi-dim-v { color: #d4a23c; }
.cgi-sev-3 .cgi-dim-v { color: #ef4444; }