/* ============================================================
   WIDGETS — node-faithful (Investigation) + generic (Chat).
   ============================================================ */

/* ---- Customer Risk + Recommended (S1) ---- */
.cr{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.cr{grid-template-columns:1fr}}
/* CANONICAL WIDGET CHROME — matches the Figma library (5457:3217). Every boxing
   widget uses .cr__box; nothing else defines a card. */
.cr__box{background:var(--box);border:1px solid var(--box-stroke);border-radius:16px;padding:22px 24px;display:flex;flex-direction:column;gap:18px}
.cr__h{display:flex;align-items:center;justify-content:space-between}
.cr__h>span:first-child{font-weight:600;font-size:14px;line-height:20px;color:var(--ink)}
.cr__ic{display:flex;align-items:center;gap:8px;color:var(--ricon)}.cr__ic svg{width:18px;height:18px}
/* verification badge — 18px neutral circle + 14px check */
.cr__vf{width:18px;height:18px;border-radius:999px;background:rgba(113,113,122,.14);
  display:grid;place-items:center;flex:none}
.cr__vf svg{width:14px;height:14px;color:var(--ricon)}
/* check-item marker — 18px box, radius 9, neutral, 11px check */
.ck{width:18px;height:18px;border-radius:9px;background:rgba(161,161,170,.12);
  display:grid;place-items:center;flex:none}
.ck svg{width:11px;height:11px;color:var(--ricon)}
.cr__grid{display:flex;gap:26px}
.cr__total{line-height:1.05}
.cr__total b{font-weight:600;font-size:30px;color:var(--ink);display:block}
.cr__total span{font-size:11px;letter-spacing:.06em;color:var(--sub)}
.cr__rows{flex:1;display:flex;flex-direction:column;gap:14px}
.cr__row{display:flex;align-items:center;gap:9px;font-size:14px}
.cr__row .d{width:8px;height:8px;border-radius:50%;flex:none}
.cr__row .nm{color:var(--ink-2)}
.cr__row .vl{margin-inline-start:auto;color:var(--ink);font-weight:500}
.rec{display:flex;flex-direction:column;gap:18px}
.rec__row{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-2)}
.rec__row .ck{margin-top:1px}

/* ---- High-risk share by region (S3, unlabeled bars) ---- */
.region{background:var(--box);border:1px solid var(--box-stroke);border-radius:16px;padding:22px 24px}
.region>.cr__h{margin-bottom:18px}   /* canonical card gap 18 between header and body */
.region__row{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.region__row:last-child{margin-bottom:0}
.region__nm{width:96px;flex:none;font-size:14px;color:var(--text-secondary)}
.region__track{flex:1;height:10px;border-radius:6px;background:var(--surface-raised);overflow:hidden}
.region__fill{display:block;height:100%;border-radius:6px;background:var(--accent);width:0;transition:width .6s var(--ease)}

/* ---- Stat trio (S4, S5) ---- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 14px;background:var(--box);border:1px solid var(--box-stroke);border-radius:16px;padding:22px 24px}
.trio>.cr__h{grid-column:1 / -1}     /* header spans the full card, stats stay a 3-col body */
@media(max-width:620px){.trio{grid-template-columns:1fr}}
.trio__c + .trio__c{border-inline-start:1px solid var(--border);padding-inline-start:14px}
.trio__k{font-size:12px;color:var(--text-muted)}
.trio__v{font-weight:700;font-size:26px;color:var(--text-primary);margin-top:6px;line-height:1.1}
.trio__s{font-size:13px;color:var(--text-faint);margin-top:6px}

/* ---- Top accounts by risk (S4) ---- */
.topacc{background:var(--box);border:1px solid var(--box-stroke);border-radius:16px;padding:22px 24px;margin-top:14px}
.topacc>.cr__h{margin-bottom:18px}   /* canonical card gap 18 between header and body */
.topacc__row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border-subtle)}
.topacc__row:last-child{border-bottom:0}
.topacc__nm{font-size:14px;color:var(--text-primary);font-weight:500}
.topacc__sc{font-size:14px;font-weight:600;color:var(--text-secondary);font-family:var(--font-mono)}

/* ---- generic (Chat) ---- */
.w-stats{display:flex;gap:12px;flex-wrap:wrap}
.w-stat{flex:1;min-width:120px;padding:22px 24px;border:1px solid var(--box-stroke);border-radius:16px;background:var(--box)}
.w-stat .k{font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:6px}
.w-stat .k .d{width:8px;height:8px;border-radius:50%}
.w-stat .v{font-weight:700;font-size:22px;margin-top:4px;color:var(--text-primary)}
.w-stat .v.accent{color:var(--accent)}
.w-stat .dd{font-size:11px;color:var(--text-faint);margin-top:2px}
.w-bars{display:flex;flex-direction:column;gap:11px;background:var(--box);border:1px solid var(--box-stroke);border-radius:16px;padding:22px 24px}
.bar-row{display:flex;align-items:center;gap:12px}
.bar-row .lbl{width:104px;flex:none;font-size:13px;color:var(--text-secondary);font-weight:500}
.bar-track{flex:1;height:9px;border-radius:5px;background:var(--surface-raised);overflow:hidden}
.bar-fill{height:100%;border-radius:5px;background:var(--accent);width:0;transition:width .6s var(--ease)}
.bar-row .vl{width:46px;text-align:end;font-weight:600;font-size:13px;color:var(--text-secondary)}
.w-delta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--box);border:1px solid var(--box-stroke);border-radius:16px;padding:22px 24px}
.delta-col{display:flex;flex-direction:column;gap:2px}
.delta-col .k{font-size:11px;color:var(--text-muted)}
.delta-col .v{font-weight:700;font-size:24px;color:var(--text-primary)}
.delta-arrow{color:var(--text-faint);display:flex}.delta-arrow svg{width:22px;height:22px}
.w-table{width:100%;border-collapse:collapse;font-size:13px;background:var(--box);border:1px solid var(--box-stroke);border-radius:16px;overflow:hidden}
.w-table th{text-align:start;font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);padding:12px 14px;border-bottom:1px solid var(--border)}
.w-table td{padding:11px 14px;border-bottom:1px solid var(--border-subtle);color:var(--text-secondary)}
.w-table tr:last-child td{border-bottom:0}
.w-table td.name{color:var(--text-primary);font-weight:500}
.w-ranked{background:var(--box);border:1px solid var(--box-stroke);border-radius:16px;padding:6px 24px}
.rank-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border-subtle)}
.rank-row:last-child{border-bottom:0}
.rank-n{width:16px;flex:none;color:var(--text-faint);font-weight:600;font-size:12px;text-align:center}
.rank-name{flex:1;min-width:0}.rank-name b{font-weight:500;font-size:14px;color:var(--text-primary);display:block}
.rank-name span{font-size:11px;color:var(--text-faint)}
.rank-score{font-weight:600;font-size:13px;color:var(--text-secondary);font-family:var(--font-mono)}

/* status tag (reused by chat) */
.tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:6px;font-weight:600;font-size:11px;line-height:1}
.tag--success{background:var(--success-soft);color:var(--success)}
.tag--warning{background:var(--warning-soft);color:var(--warning)}
.tag--danger{background:var(--danger-soft);color:var(--danger)}
.tag--accent{background:var(--accent-soft);color:var(--accent)}