/* ============================================================================
   BLOOM — Credited source creators (record detail)
   ----------------------------------------------------------------------------
   Warm, window-panel styling that sits inside a record's Development /
   Propagation column. Tokens come from badges.css (--ink, --teal, --gold,
   --zone-teal, --radius, .win, .btn). Nothing here hard-codes a brand color
   that isn't already a badges.css variable.

   States per creator:
     - VERIFIED  -> a calm profile chip + the date the credit was claimed.
     - UNCLAIMED -> a "Claim this profile" button that expands a verify form.

   The whole block is hidden (component renders nothing) when a record has no
   credited source creators, so it never leaves an empty heading behind.
   ============================================================================ */

.cred{margin-top:20px;}
.cred__h{font-family:"Baloo 2";font-weight:700;font-size:19px;color:var(--ink);margin:0 0 4px;}
.cred__lead{font-family:"Nunito Sans";font-weight:600;font-size:14.5px;color:var(--ink-soft);margin:0 0 14px;max-width:60ch;line-height:1.5;}

.cred__list{display:flex;flex-direction:column;gap:12px;}

/* one creator card */
.credcard{
  border:2px solid rgba(14,124,107,.22);
  background:var(--zone-teal);
  border-radius:16px;
  padding:14px 16px;
}
.credcard__row{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;}
.credcard__av{
  width:40px;height:40px;flex:none;border-radius:12px;
  background:var(--teal);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:"Baloo 2";font-weight:700;font-size:16px;line-height:1;
}
.credcard__main{min-width:0;flex:1 1 200px;}
.credcard__name{font-family:"Baloo 2";font-weight:700;font-size:16px;color:var(--ink);line-height:1.2;margin:0;word-break:break-word;}
.credcard__title{font-family:"Nunito Sans";font-weight:600;font-size:13.5px;color:var(--ink-soft);margin:2px 0 0;word-break:break-word;}

/* verified state */
.credcard--verified{border-color:rgba(31,122,77,.3);}
.credcard__badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:"Nunito Sans";font-weight:800;font-size:12.5px;
  letter-spacing:.03em;color:var(--green-deep);
  background:var(--bar-green);border-radius:999px;padding:4px 11px;
  margin-top:7px;
}
.credcard__badge svg{width:14px;height:14px;flex:none;}
.credcard__date{display:block;font-family:"Nunito Sans";font-weight:600;font-size:12.5px;color:var(--ink-soft);margin-top:6px;}

/* claim affordance */
.credcard__claim{margin-top:4px;align-self:center;}

/* verify form (revealed under a card) */
.credform{margin-top:14px;border-top:2px dashed rgba(14,124,107,.28);padding-top:14px;}
.credform[hidden]{display:none;}
.credform__intro{font-family:"Nunito Sans";font-weight:600;font-size:13.5px;color:var(--ink-soft);margin:0 0 12px;line-height:1.5;max-width:58ch;}
.credform__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.credform__grid .span2{grid-column:1 / -1;}
@media (max-width:560px){.credform__grid{grid-template-columns:1fr;}}

.credfield label{display:block;font-family:"Nunito Sans";font-weight:700;font-size:13px;color:var(--ink);margin:0 0 5px;}
.credfield .req{color:#B4471F;margin-left:2px;}
.credfield input{
  width:100%;font-family:"Nunito Sans";font-weight:600;font-size:14.5px;color:var(--ink);
  background:#fff;border:2px solid rgba(14,124,107,.3);border-radius:11px;padding:10px 12px;
}
.credfield input:focus{outline:3px solid var(--teal);outline-offset:2px;border-color:var(--teal);}
.credfield input.credfield--invalid{border-color:#B4471F;}
.credfield__hint{font-family:"Nunito Sans";font-weight:600;font-size:12px;color:var(--ink-soft);margin:5px 0 0;line-height:1.4;}

.credform__err{
  display:none;align-items:center;gap:8px;margin:0 0 12px;
  font-family:"Nunito Sans";font-weight:700;font-size:13.5px;color:#8A2F12;
  background:#FBEAE3;border:2px solid #E7B7A4;border-radius:11px;padding:9px 12px;
}
.credform__err[data-show="1"]{display:flex;}

.credform__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center;}
.credform__note{font-family:"Nunito Sans";font-weight:600;font-size:12.5px;color:var(--ink-soft);margin:0;flex:1 1 220px;line-height:1.45;}

/* editor-only: confirm email & send invite (shown to staff on UNCLAIMED cards;
   the flag is UX-only — the RPC + send-invite Function re-check the caller) */
.credinvite{margin-top:14px;border-top:2px dashed rgba(14,124,107,.28);padding-top:12px;}
.credinvite__k{
  font-family:"Nunito Sans";font-weight:800;font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep);
  margin:0 0 6px;
}
.credinvite__intro{font-family:"Nunito Sans";font-weight:600;font-size:13px;color:var(--ink-soft);margin:0 0 10px;line-height:1.5;max-width:58ch;}
.credinvite__row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
.credinvite__email{flex:1 1 220px;}
.credinvite__verb{flex:0 1 160px;}
.credinvite__row .btn{margin-bottom:2px;}
.credfield select{
  width:100%;font-family:"Nunito Sans";font-weight:600;font-size:14.5px;color:var(--ink);
  background:#fff;border:2px solid rgba(14,124,107,.3);border-radius:11px;padding:10px 12px;
}
.credfield select:focus{outline:3px solid var(--teal);outline-offset:2px;border-color:var(--teal);}
.credinvite__status{font-family:"Nunito Sans";font-weight:600;font-size:12.5px;color:var(--ink-soft);margin:8px 0 0;}
.credinvite__status:empty{display:none;}

/* filed / thank-you state */
.credform__done{
  display:flex;align-items:flex-start;gap:9px;
  font-family:"Nunito Sans";font-weight:700;font-size:14px;color:var(--green-deep);
  background:var(--zone-green);border:2px solid rgba(31,122,77,.3);border-radius:12px;padding:12px 14px;
}
.credform__done svg{width:18px;height:18px;flex:none;margin-top:1px;}

@media (prefers-reduced-motion:reduce){
  .btn{transition:none;}
}