/* =====================================================================
   onsight-vocab.css — visual vocabulary tokens
   CHG-8: single source of truth for risk, source quality, freshness,
   sanctions/PEP, alert severity, commission status, privilege.

   Pages can include this without onsight-vocab.js (CSS-only) and just
   apply the right class names. Or use the JS helpers for renderers.
   ===================================================================== */

:root {
  /* Brand */
  --ons-brand:           #1400FF;
  --ons-brand-tint:      rgba(20, 0, 255, 0.08);
  --ons-ink:             #0b0c0e;
  --ons-muted:           #6b7280;
  --ons-line:            #e5e7eb;
  --ons-bg:              #fafbfc;
  --ons-bg-card:         #ffffff;

  /* Risk bands — diverging cool→hot */
  --risk-unknown-bg:     #f1f3f5;  --risk-unknown-fg:     #4b5563;
  --risk-low-bg:         #ecfdf5;  --risk-low-fg:         #047857;
  --risk-medium-bg:      #fef3c7;  --risk-medium-fg:      #92400e;
  --risk-high-bg:        #fed7aa;  --risk-high-fg:        #9a3412;
  --risk-critical-bg:    #fee2e2;  --risk-critical-fg:    #991b1b;

  /* Alert severity — same hue ramp as risk for consistency */
  --sev-info-bg:         #eef2ff;  --sev-info-fg:         #3730a3;
  --sev-low-bg:          var(--risk-low-bg);      --sev-low-fg:        var(--risk-low-fg);
  --sev-medium-bg:       var(--risk-medium-bg);   --sev-medium-fg:     var(--risk-medium-fg);
  --sev-high-bg:         var(--risk-high-bg);     --sev-high-fg:       var(--risk-high-fg);
  --sev-critical-bg:     var(--risk-critical-bg); --sev-critical-fg:   var(--risk-critical-fg);

  /* Admiralty source quality buckets */
  --adm-A-bg:  #d1fae5; --adm-A-fg:  #065f46;  /* completely reliable */
  --adm-B-bg:  #d1fae5; --adm-B-fg:  #065f46;  /* usually reliable */
  --adm-C-bg:  #fef3c7; --adm-C-fg:  #92400e;  /* fairly reliable */
  --adm-D-bg:  #fed7aa; --adm-D-fg:  #9a3412;  /* not usually reliable */
  --adm-E-bg:  #fee2e2; --adm-E-fg:  #991b1b;  /* unreliable */
  --adm-F-bg:  #f1f3f5; --adm-F-fg:  #4b5563;  /* cannot be judged */

  /* Freshness */
  --fresh-bg:    #ecfdf5;  --fresh-fg:    #047857;
  --aging-bg:    #fef3c7;  --aging-fg:    #92400e;  /* 90-365d */
  --stale-bg:    #fed7aa;  --stale-fg:    #9a3412;  /* >365d */
  --archive-bg:  #f1f3f5;  --archive-fg:  #4b5563;
  --unknown-bg:  #f1f3f5;  --unknown-fg:  #6b7280;

  /* Status flags */
  --sanctions-bg:  #fee2e2;  --sanctions-fg:  #991b1b;
  --pep-bg:        #fef3c7;  --pep-fg:        #92400e;
  --privilege-bg:  #ede9fe;  --privilege-fg:  #5b21b6;
  --internal-bg:   #f1f3f5;  --internal-fg:   #374151;

  /* Commission status — covers real schema enum values */
  --commission-requested-bg:   #eff6ff; --commission-requested-fg:   #1e40af;
  --commission-scoped-bg:      #ede9fe; --commission-scoped-fg:      #5b21b6;
  --commission-progress-bg:    #fef3c7; --commission-progress-fg:    #92400e;
  --commission-delivered-bg:   #ecfdf5; --commission-delivered-fg:   #047857;
  --commission-cancelled-bg:   #f1f3f5; --commission-cancelled-fg:   #6b7280;
  --commission-overdue-bg:     #fee2e2; --commission-overdue-fg:     #991b1b;
  --commission-open-bg:        var(--commission-requested-bg); --commission-open-fg: var(--commission-requested-fg);

  /* Entity lifecycle */
  --entity-live-bg:        var(--fresh-bg);    --entity-live-fg:        var(--fresh-fg);
  --entity-pending-bg:     #eff6ff;            --entity-pending-fg:     #1e40af;
  --entity-merged-bg:      #f1f3f5;            --entity-merged-fg:      #4b5563;
  --entity-dissolved-bg:   #f1f3f5;            --entity-dissolved-fg:   #6b7280;
}

/* =====================================================================
   Pill — the universal small badge
   ===================================================================== */
.ons-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.5;
  text-transform: capitalize; letter-spacing: 0.01em;
  white-space: nowrap; vertical-align: middle;
}
.ons-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.ons-pill code { background: rgba(0,0,0,0.06); border-radius: 3px; padding: 0 4px; font-size: 10px; font-weight: 700; }

/* Risk */
.ons-pill.risk-unknown   { background: var(--risk-unknown-bg);   color: var(--risk-unknown-fg); }
.ons-pill.risk-low       { background: var(--risk-low-bg);       color: var(--risk-low-fg); }
.ons-pill.risk-medium    { background: var(--risk-medium-bg);    color: var(--risk-medium-fg); }
.ons-pill.risk-high      { background: var(--risk-high-bg);      color: var(--risk-high-fg); }
.ons-pill.risk-critical  { background: var(--risk-critical-bg);  color: var(--risk-critical-fg); }

/* Alert severity */
.ons-pill.sev-info      { background: var(--sev-info-bg);     color: var(--sev-info-fg); }
.ons-pill.sev-low       { background: var(--sev-low-bg);      color: var(--sev-low-fg); }
.ons-pill.sev-medium    { background: var(--sev-medium-bg);   color: var(--sev-medium-fg); }
.ons-pill.sev-high      { background: var(--sev-high-bg);     color: var(--sev-high-fg); }
.ons-pill.sev-critical  { background: var(--sev-critical-bg); color: var(--sev-critical-fg); }

/* Admiralty (two-layer: code + plain) */
.ons-pill.adm-A { background: var(--adm-A-bg); color: var(--adm-A-fg); }
.ons-pill.adm-B { background: var(--adm-B-bg); color: var(--adm-B-fg); }
.ons-pill.adm-C { background: var(--adm-C-bg); color: var(--adm-C-fg); }
.ons-pill.adm-D { background: var(--adm-D-bg); color: var(--adm-D-fg); }
.ons-pill.adm-E { background: var(--adm-E-bg); color: var(--adm-E-fg); }
.ons-pill.adm-F { background: var(--adm-F-bg); color: var(--adm-F-fg); }

/* Freshness */
.ons-pill.fresh    { background: var(--fresh-bg);    color: var(--fresh-fg); }
.ons-pill.aging    { background: var(--aging-bg);    color: var(--aging-fg); }
.ons-pill.stale    { background: var(--stale-bg);    color: var(--stale-fg); }
.ons-pill.archive  { background: var(--archive-bg);  color: var(--archive-fg); }
.ons-pill.unknown  { background: var(--unknown-bg);  color: var(--unknown-fg); }

/* Flags */
.ons-pill.sanctions { background: var(--sanctions-bg); color: var(--sanctions-fg); }
.ons-pill.pep       { background: var(--pep-bg);       color: var(--pep-fg); }
.ons-pill.privilege { background: var(--privilege-bg); color: var(--privilege-fg); }
.ons-pill.internal  { background: var(--internal-bg);  color: var(--internal-fg); }

/* Commission status */
.ons-pill.commission-requested  { background: var(--commission-requested-bg); color: var(--commission-requested-fg); }
.ons-pill.commission-scoped     { background: var(--commission-scoped-bg);    color: var(--commission-scoped-fg); }
.ons-pill.commission-open       { background: var(--commission-open-bg);      color: var(--commission-open-fg); }
.ons-pill.commission-progress   { background: var(--commission-progress-bg);  color: var(--commission-progress-fg); }
.ons-pill.commission-delivered  { background: var(--commission-delivered-bg); color: var(--commission-delivered-fg); }
.ons-pill.commission-cancelled  { background: var(--commission-cancelled-bg); color: var(--commission-cancelled-fg); }
.ons-pill.commission-overdue    { background: var(--commission-overdue-bg);   color: var(--commission-overdue-fg); }

/* Entity lifecycle */
.ons-pill.entity-live      { background: var(--entity-live-bg);     color: var(--entity-live-fg); }
.ons-pill.entity-pending   { background: var(--entity-pending-bg);  color: var(--entity-pending-fg); }
.ons-pill.entity-merged    { background: var(--entity-merged-bg);   color: var(--entity-merged-fg); }
.ons-pill.entity-dissolved { background: var(--entity-dissolved-bg);color: var(--entity-dissolved-fg); }

/* =====================================================================
   Action buttons — Pin / Follow / Share / Bundle
   These appear in consistent positions on every entity-like page.
   ===================================================================== */
.ons-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500;
  background: #fff; border: 1px solid var(--ons-line); color: var(--ons-ink);
  cursor: pointer; text-decoration: none; font-family: inherit;
  transition: background .1s, border-color .1s;
}
.ons-action:hover { background: var(--ons-brand-tint); border-color: #c8c9ff; color: var(--ons-brand); }
.ons-action.is-on { background: var(--ons-brand-tint); border-color: #c8c9ff; color: var(--ons-brand); }
.ons-action .ico  { font-size: 13px; line-height: 1; }

/* =====================================================================
   Score delta — direction + magnitude
   Use for "risk score went up 12 pts" type readouts.
   ===================================================================== */
.ons-delta {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 700;
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
.ons-delta.up   { background: var(--risk-critical-bg); color: var(--risk-critical-fg); }
.ons-delta.down { background: var(--fresh-bg);         color: var(--fresh-fg); }
.ons-delta.flat { background: var(--internal-bg);      color: var(--internal-fg); }

/* =====================================================================
   Inline icons — single character glyphs we use as quick markers.
   These are intentionally text characters, not images, so they color
   with currentColor and never break offline.
   ===================================================================== */
.ons-ico::before {
  display: inline-block; width: 1.1em; text-align: center; margin-right: 2px;
  font-style: normal; opacity: 0.85;
}
.ons-ico.pin::before        { content: "\1F4CC"; }    /* 📌 */
.ons-ico.bell::before       { content: "\1F514"; }    /* 🔔 */
.ons-ico.lock::before       { content: "\1F512"; }    /* 🔒 */
.ons-ico.search::before     { content: "\1F50D"; }    /* 🔍 */
.ons-ico.gear::before       { content: "\2699 \FE0F"; }
.ons-ico.bundle::before     { content: "\1F4DA"; }    /* 📚 */
.ons-ico.sanctions::before  { content: "\26D4"; }     /* ⛔ */
.ons-ico.pep::before        { content: "\2605"; }     /* ★ */
.ons-ico.privilege::before  { content: "\2696 \FE0F"; }