/* HerCall — shared UI components (small, reusable bits) */

/* Verification badges */
.hc-badge{
  display:inline-flex;
  align-items:center;
  gap:.35em;
  padding:.18em .55em;
  border-radius:999px;
  font-size:.78rem;
  line-height:1.2;
  font-weight:650;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  vertical-align:middle;
}
.hc-badge .hc-badge-ico{ font-size:1em; line-height:1; }
.hc-badge .hc-badge-txt{ letter-spacing:.01em; }

.hc-badge[data-kind="id"]{
  border-color: rgba(56,189,248,.35);
  background: rgba(56,189,248,.10);
}
.hc-badge[data-kind="selfie"]{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.10);
}

.hc-badge.size-xs{ font-size:.70rem; padding:.14em .45em; gap:.32em; }
.hc-badge.size-sm{ font-size:.78rem; }
.hc-badge.size-md{ font-size:.86rem; padding:.22em .62em; }

/* Allow badges inside headings without breaking line-height too much */
h1 .hc-badge, h2 .hc-badge, h3 .hc-badge { margin-left:.4em; transform: translateY(-.05em); }


/* ============================================================
   Settings-inspired tone surfaces (opt-in via .hc-tone)
   - subtle radial halo (top-left)
   - thin top gradient line + matching glow
   ============================================================ */

.hc-tone{
  position: relative;
  overflow: hidden;
  --tone: 148 163 184; /* default slate (RGB triplet) */
}

/* keep content above the overlay */
.hc-tone > *{ position: relative; }

.hc-tone::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(520px 280px at 20% 0%, rgb(var(--tone) / .22), transparent 60%);
  opacity: .9;
  pointer-events:none;
}

.hc-tone::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgb(var(--tone) / .85), transparent);
  opacity: .88;
  pointer-events:none;
  box-shadow: 0 0 18px rgb(var(--tone) / .35);
}

/* Tone mapping (use with data-tone="...") */
.hc-tone[data-tone="account"]  { --tone: 234 179 8; }   /* gold */
.hc-tone[data-tone="plan"]     { --tone: 245 158 11; }  /* amber */
.hc-tone[data-tone="prefs"]    { --tone: 59 130 246; }  /* blue */
.hc-tone[data-tone="security"] { --tone: 236 72 153; }  /* pink */
.hc-tone[data-tone="privacy"]  { --tone: 168 85 247; }  /* violet */
.hc-tone[data-tone="blocks"]   { --tone: 148 163 184; } /* slate */
.hc-tone[data-tone="data"]     { --tone: 16 185 129; }  /* emerald */
.hc-tone[data-tone="danger"]   { --tone: 239 68 68; }   /* red */
.hc-tone[data-tone="chat"]     { --tone: 6 182 212; }   /* cyan */
.hc-tone[data-tone="profile"]  { --tone: 236 72 153; }  /* pink */
.hc-tone[data-tone="reports"]  { --tone: 239 68 68; }   /* red */



/* ============================================================
   Responsive safety net (global, low-risk)
   - Prevent horizontal overflow
   - Make media/form elements fit their container
   ============================================================ */

:where(img, video, canvas, iframe){
  max-width: 100%;
  height: auto;
}

:where(input, select, textarea, button){
  max-width: 100%;
}

:where(pre){
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Text overflow helpers */
.hc-ellipsis{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hc-wrap{
  overflow-wrap: anywhere;
  word-break: break-word;
}