/* VOLURR — the Intelligence box's derivations, consensus, levels and shift chips.
 *
 * A separate stylesheet: chart-plot.css belongs to the chart session, and .pcai-* rules stay theirs.
 * Everything here styles only pcint-* nodes this module created.
 *
 * COLOUR LAW. up/down classes carry the chart's own direction colours — that is legal here because
 * every one of them marks an actual DIRECTION (a passed bullish check, an up-count). The chrome
 * itself — cards, chips, tags — is slate and amber, never green or red.
 *
 * DIGITS are Latin everywhere («ارقام فقط اينكلش») — the numbers are written by JS, and this file
 * keeps them tabular so a column of counts does not jitter.
 */

/* ── consensus line ───────────────────────────────────────────────────────────────────────────── */
.pcint-consensus {
  font-size: 11px;
  line-height: 1.7;
  padding: 7px 9px;
  margin-bottom: 8px;
  border-radius: 9px;
  background: var(--bg2, rgba(0, 0, 0, .16));
  border: 1px solid var(--line, rgba(255, 255, 255, .09));
  color: var(--txt2, inherit);
  font-variant-numeric: tabular-nums;
}
.pcint-cn { font-weight: 800; margin-inline-end: 7px; white-space: nowrap; }
.pcint-cn b { font-weight: 800; }
.pcint-cn b.up { color: var(--up, #26d07c); }
.pcint-cn b.down { color: var(--down, #ff5667); }

/* ── tappable rows ────────────────────────────────────────────────────────────────────────────── */
/* The row is already a flex line the chart session owns — this only says "you can press me".
   min-height keeps the tap target honest without re-declaring their layout. */
.pcai-row.pcint-tap, .pcai-conf.pcint-tap {
  cursor: pointer;
  min-height: 30px;
  border-radius: 7px;
}
.pcai-row.pcint-tap:hover, .pcai-conf.pcint-tap:hover,
.pcai-row.pcint-tap:focus-visible, .pcai-conf.pcint-tap:focus-visible {
  background: rgba(232, 147, 42, .06);
  outline: none;
}

/* ── the detail card ──────────────────────────────────────────────────────────────────────────── */
.pcint-detail {
  margin: 2px 0 8px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--bg2, rgba(0, 0, 0, .18));
  border-inline-start: 3px solid rgba(232, 147, 42, .5);
  animation: pcintIn .14s ease-out;
}
@keyframes pcintIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pcint-detail { animation: none; } }

.pcint-l {
  font-size: 10.8px;
  line-height: 1.8;
  color: var(--txt2, inherit);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.pcint-l.up { color: var(--up, #26d07c); }      /* a passed directional check IS a direction */
.pcint-l.down { color: var(--down, #ff5667); }
.pcint-n { font-weight: 700; direction: ltr; unicode-bidi: embed; }
.pcint-src { opacity: .55; font-size: 10px; }
.pcint-dim { opacity: .55; }

/* ── the levels card ──────────────────────────────────────────────────────────────────────────── */
.pcint-card {
  margin-top: 9px;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--bg2, rgba(0, 0, 0, .16));
  border: 1px solid var(--line, rgba(255, 255, 255, .09));
}
.pcint-h {
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pcint-fac {
  display: block;
  font-size: 9.5px;
  opacity: .6;
  letter-spacing: .2px;
}
.pcint-tag {
  font-size: 8.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(232, 147, 42, .4);
  color: #e8932a;
  white-space: nowrap;
}
.pcint-pd { margin-top: 4px; border-top: 1px dashed var(--line, rgba(255, 255, 255, .1)); padding-top: 5px; }

/* ── shift chips ──────────────────────────────────────────────────────────────────────────────── */
/* Amber, deliberately: a change of reading is news, not a direction. */
.pcint-shift {
  font-size: 8.8px;
  font-weight: 700;
  padding: 1px 6px;
  margin-inline-start: 6px;
  border-radius: 999px;
  background: rgba(232, 147, 42, .1);
  border: 1px solid rgba(232, 147, 42, .35);
  color: #e8932a;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── the ask door ─────────────────────────────────────────────────────────────────────────────── */
.pcint-ask {
  display: block;
  margin-top: 6px;
  min-height: 44px;   /* the 44px law */
  padding: 6px 10px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  background: rgba(255, 255, 255, .04);
  color: var(--txt, inherit);
  touch-action: manipulation;
}
.pcint-ask:hover, .pcint-ask:focus-visible {
  border-color: rgba(232, 147, 42, .45);
  color: #e8932a;
  background: rgba(232, 147, 42, .08);
  outline: none;
}
/* derivation pass/fail marks are SVG at currentColor, like every glyph in the box */
.pcint-l svg { width: 11px; height: 11px; vertical-align: -1.5px; margin-inline-end: 3px; }