/* ═══════════════════════════════════════════════════════════════════════════
   identity.css — additions on top of the CyberBox design system (style.css,
   cyber-theme.css …) for the identity investigation pages. Uses only the
   design system's theme variables, so dark/light switching keeps working.
   ═══════════════════════════════════════════════════════════════════════════ */

.provider-chip { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px;
  border:1px solid var(--border); border-radius:8px; font-size:12px; font-weight:600; color:var(--text-secondary); }

/* Verdict badges (mapped onto the design system's badge palette) */
.v-ESCALATE { background:var(--red-glow); color:var(--red); border:1px solid var(--red); }
.v-REVIEW   { background:var(--yellow-glow); color:var(--yellow); border:1px solid var(--yellow); }
.v-BENIGN   { background:var(--green-glow); color:var(--green); border:1px solid var(--green); }

/* Clickable table rows */
tr.clickable { cursor:pointer; }
tr.clickable:hover td { background:var(--bg-card-hover); }

/* ── Fetch → Process → Output stage strip ─────────────────────────────────── */
.stage-strip { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-bottom:20px; }
@media (max-width: 900px) { .stage-strip { grid-template-columns:1fr; } }
.stage-box { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 16px; position:relative; border-top:3px solid var(--c, var(--accent)); }
.stage-box .sb-num { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c); }
.stage-box .sb-title { font-size:15px; font-weight:700; color:var(--text-primary); margin:2px 0 4px; }
.stage-box .sb-sub { font-size:12px; color:var(--text-muted); }
.stage-box .sb-count { position:absolute; top:12px; right:14px; font-size:22px; font-weight:700; color:var(--text-primary); }

/* ── Trace timeline ────────────────────────────────────────────────────────── */
.trace { list-style:none; margin:0; padding:0; }
.trace li { display:grid; grid-template-columns:22px 1fr; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
.trace li:last-child { border-bottom:0; }
.trace .ti { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; margin-top:1px; }
.trace .ti.pass { background:var(--green-glow); color:var(--green); border:1px solid var(--green); }
.trace .ti.fail { background:var(--red-glow); color:var(--red); border:1px solid var(--red); }
.trace .ti.info { background:var(--cyan-glow); color:var(--accent); border:1px solid var(--accent); }
.trace .tt { font-size:13px; font-weight:600; color:var(--text-primary); overflow-wrap:anywhere; }
.trace .td { font-size:12.5px; color:var(--text-secondary); margin-top:2px; overflow-wrap:anywhere; }
.trace .ts { font-size:11.5px; color:var(--text-muted); margin-top:3px; display:flex; gap:5px; align-items:center; }

/* ── How It Works flow diagram ─────────────────────────────────────────────── */
.flow { display:flex; align-items:stretch; gap:0; flex-wrap:wrap; }
.flow-step { flex:1 1 180px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px; min-width:0; border-top:3px solid var(--c, var(--accent)); }
.flow-step h4 { margin:0 0 6px; font-size:13.5px; color:var(--text-primary); display:flex; gap:7px; align-items:center; }
.flow-step p { margin:0; font-size:12.5px; color:var(--text-secondary); line-height:1.5; }
.flow-step code, .mono-chip { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:11.5px;
  background:var(--bg-input); border:1px solid var(--border); border-radius:4px; padding:1px 5px; }
.flow-arrow { display:flex; align-items:center; justify-content:center; padding:0 8px; color:var(--text-muted); font-size:20px; }
@media (max-width: 900px) { .flow { flex-direction:column; } .flow-arrow { transform:rotate(90deg); padding:6px 0; } }

.uc-doc { white-space:pre-wrap; font-family:ui-monospace, Menlo, Consolas, monospace; font-size:12px;
  color:var(--text-secondary); background:var(--bg-input); border:1px solid var(--border); border-radius:8px;
  padding:12px 14px; margin:0; overflow-x:auto; }

.kv-grid { display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; font-size:13px; }
.kv-grid dt { color:var(--text-muted); }
.kv-grid dd { margin:0; color:var(--text-primary); overflow-wrap:anywhere; }

.section-gap { margin-top:20px; }
.flag-sev { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.flag-sev.critical, .flag-sev.high { color:var(--red); }
.flag-sev.medium { color:var(--yellow); }
.flag-sev.low, .flag-sev.info { color:var(--text-muted); }
.back-link { display:inline-flex; gap:6px; align-items:center; font-size:12.5px; color:var(--text-secondary);
  text-decoration:none; margin-bottom:10px; }
.back-link:hover { color:var(--accent); }

/* ── AI Analysis card ──────────────────────────────────────────────────────── */
.ai-card { border-top:3px solid var(--orange); }
.ai-loading { display:flex; gap:10px; align-items:center; color:var(--text-muted); font-size:13px; padding:6px 0; }
.ai-summary { font-size:14px; line-height:1.6; color:var(--text-primary); margin:4px 0 12px; }
.ai-p { font-size:13px; line-height:1.55; color:var(--text-secondary); margin:4px 0 0; }
.ai-list { margin:6px 0 0; padding-left:18px; font-size:13px; color:var(--text-secondary); }
.ai-list li { margin:4px 0; }
.ai-verdict { font-size:13px; padding:9px 12px; border-radius:8px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.ai-verdict.agree { background:var(--green-glow); border:1px solid var(--green); color:var(--text-primary); }
.ai-verdict.disagree { background:var(--yellow-glow); border:1px solid var(--yellow); color:var(--text-primary); }
.ai-notice { font-size:13px; padding:10px 12px; border-radius:8px; background:var(--cyan-glow);
  border:1px solid var(--border-light); color:var(--text-secondary); display:flex; gap:8px; align-items:flex-start; }
.ai-foot { font-size:11.5px; color:var(--text-muted); margin-top:14px; padding-top:10px; border-top:1px solid var(--border); }
.ai-facts { margin-top:12px; font-size:12.5px; color:var(--text-secondary); }
.ai-facts summary { cursor:pointer; color:var(--accent); }
.ai-facts pre { margin-top:8px; max-height:360px; overflow:auto; }

/* ── MITRE ATT&CK chips ────────────────────────────────────────────────────── */
.attack-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.attack-chip { font-size:11.5px; padding:2px 8px; border-radius:6px; border:1px solid var(--border);
  background:var(--bg-card); color:var(--text-secondary); }
.attack-chip b { color:var(--purple); font-family:var(--font-mono, monospace); }

/* ── Case panel ────────────────────────────────────────────────────────────── */
.analyst-chip { cursor:pointer; background:transparent; }
.analyst-chip:hover { border-color:var(--accent); color:var(--text-primary); }
.case-row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start; }
.case-row .form-group { min-width:150px; }
.case-decision { font-size:13px; padding:8px 12px; border-radius:8px; border:1px solid var(--border); }
.case-decision.ok   { border-color:var(--green); background:var(--green-glow); }
.case-decision.over { border-color:var(--purple); background:var(--bg-card-hover); }
.case-history { list-style:none; margin:10px 0 0; padding:0; max-height:280px; overflow:auto; }
.case-history li { display:flex; gap:10px; padding:7px 0; border-bottom:1px solid var(--border); font-size:13px; }
.case-history .ts { font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.ch-kind { flex:0 0 70px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-muted); padding-top:2px; }
.ch-kind.decision { color:var(--purple); } .ch-kind.action { color:var(--orange); }
.ch-kind.ticket { color:var(--info); } .ch-kind.note { color:var(--green); }
.ai-notice.warn { border-color:var(--red); background:var(--red-glow); }

/* ── View-only banner (public link) ───────────────────────────────────────── */
.readonly-banner { display:flex; align-items:center; gap:8px; margin:12px 24px 0; padding:8px 14px; font-size:13px;
  border:1px solid var(--yellow); border-radius:8px; background:var(--yellow-glow); color:var(--text-primary); }