/* assets/css/jp-trust-badge.css — Block 41 (2026-05-31)
   Honest credibility chrome — canonical badge component used by every
   surface that shows AI output, cohort data, Trust Scores, or quote/
   transaction status. Replaces the per-surface inline pill HTML that
   accumulated across Blocks 14, 18, 27, 31, 35.

   Visual language inherits from .jp-pd-pill in jp-patient-dashboard.js.
   The new things this component adds are:
     · consistent state palette across the whole platform
     · rich tooltip on hover/click with plain-language explanation
     · tooltip ALWAYS links to /trust-honesty.html#<state> so visitors
       can dig deeper

   Use either as data-attributes:
     <span class="jp-tbadge" data-jp-tbadge="sample"
           data-jp-tool="brief">SAMPLE</span>
   or programmatically via JPBadge.render(host, {state, label, tool}). */

.jp-tbadge{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 9px;
  border-radius:999px;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;
  white-space:nowrap;
  vertical-align:middle;
  cursor:help;
  user-select:none;
  border:1px solid transparent;
  transition:transform .12s ease;
}
.jp-tbadge:hover{transform:translateY(-0.5px)}
.jp-tbadge::before{
  content:'';
  width:5px;height:5px;
  border-radius:50%;
  background:currentColor;
  opacity:.7;
}

/* ── state palette (covers AI, cohort, Trust Score, quote states) ── */
.jp-tbadge[data-jp-tbadge="live"]      {background:#ECFDF5;color:#047857;border-color:#A7F3D0}
.jp-tbadge[data-jp-tbadge="cached"]    {background:#F5F3FF;color:#6D28D9;border-color:#DDD6FE}
.jp-tbadge[data-jp-tbadge="sample"]    {background:#FFF7ED;color:#B45309;border-color:#FED7AA}
.jp-tbadge[data-jp-tbadge="pending"]   {background:#FFFBEB;color:#92400E;border-color:#FDE68A}
.jp-tbadge[data-jp-tbadge="verified"]  {background:#ECFDF5;color:#047857;border-color:#A7F3D0}
.jp-tbadge[data-jp-tbadge="provisional"]{background:#F1F5F9;color:#475569;border-color:#CBD5E1}
.jp-tbadge[data-jp-tbadge="draft"]     {background:#F1F5F9;color:#475569;border-color:#CBD5E1}
.jp-tbadge[data-jp-tbadge="sent"]      {background:#ECFEFF;color:#0E7490;border-color:#A5F3FC}
.jp-tbadge[data-jp-tbadge="accepted"]  {background:linear-gradient(135deg,#D1FAE5,#CCFBF1);color:#053226;border-color:#A7F3D0}
.jp-tbadge[data-jp-tbadge="expired"]   {background:#FEF2F2;color:#991B1B;border-color:#FECACA}
.jp-tbadge[data-jp-tbadge="failed"]    {background:#FEF2F2;color:#991B1B;border-color:#FECACA}

/* "ai_input" hint — gives every interactive AI input a small chrome */
.jp-tbadge[data-jp-tbadge="ai-assist"] {background:#EFF6FF;color:#1D4ED8;border-color:#BFDBFE}

/* ── tooltip (rich, plain-language, links to explainer) ── */
.jp-tbadge-tip{
  position:absolute;
  bottom:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  width:260px;
  padding:12px 14px;
  border-radius:12px;
  background:#0F172A;
  color:#fff;
  font-size:12.5px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.005em;
  text-transform:none;
  box-shadow:0 12px 36px rgba(15,23,42,.32);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease,transform .15s ease;
  z-index:9999;
  cursor:auto;
}
.jp-tbadge-tip::after{
  content:'';
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:#0F172A;
}
.jp-tbadge[data-jp-tbadge-open="1"] .jp-tbadge-tip,
.jp-tbadge:hover .jp-tbadge-tip,
.jp-tbadge:focus-within .jp-tbadge-tip{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.jp-tbadge-tip-title{
  font-weight:800;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#5EEAD4;
  margin-bottom:6px;
}
.jp-tbadge-tip p{margin:0 0 8px;color:#E2E8F0}
.jp-tbadge-tip p:last-child{margin-bottom:0}
.jp-tbadge-tip a{
  display:inline-flex;align-items:center;gap:4px;
  color:#5EEAD4;
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:2px;
  font-weight:700;
}
.jp-tbadge-tip a:hover{color:#fff}

@media (max-width:560px){
  .jp-tbadge-tip{
    width:min(280px,calc(100vw - 32px));
    left:auto;
    right:0;
    transform:translateY(4px);
  }
  .jp-tbadge:hover .jp-tbadge-tip,
  .jp-tbadge[data-jp-tbadge-open="1"] .jp-tbadge-tip{
    transform:translateY(0);
  }
  .jp-tbadge-tip::after{left:auto;right:14px;transform:none}
}
@media (prefers-reduced-motion: reduce) and (min-width: 99999px){
  .jp-tbadge,.jp-tbadge-tip{transition:none}
}