/* ============================================================
   RunOrJog — EYEBROW BADGE VARIETY
   Six distinct badge forms (eb-v1…eb-v6) for the showcase /
   bento section labels. Each keeps the mono-uppercase + accent
   language but has its own shape & detailing. Loads LAST so it
   overrides the generic .showcase .eyebrow pill in polish.css.
   ============================================================ */

.eyebrow[class*="eb-v"] {
  display: inline-flex; align-items: center; gap: 10px; position: relative; overflow: visible;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: #fff;
  margin-bottom: 20px; background: none; border: 0; box-shadow: none; backdrop-filter: none;
  border-radius: 0; padding: 0;
}
.eyebrow[class*="eb-v"]::after { content: none; animation: none; } /* kill base sheen */
.eyebrow[class*="eb-v"] > span { position: relative; z-index: 2; }
.eyebrow[class*="eb-v"] .ico { width: 16px; height: 16px; padding: 0; border-radius: 0; background: none; box-shadow: none; stroke: var(--accent, var(--cyan)); position: relative; z-index: 2; flex: none; }

/* ── v1 — Cut-corner HUD tag (notched corners, accent left bar) ── */
.eyebrow.eb-v1 {
  padding: 10px 18px 10px 14px; gap: 11px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)), rgba(8, 9, 20, 0.7);
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
  backdrop-filter: blur(8px);
}
.eyebrow.eb-v1::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px;
  background: var(--accent); box-shadow: 0 0 12px var(--accent); z-index: 2;
}
.eyebrow.eb-v1 .ico { width: 17px; height: 17px; }

/* ── v2 — Bracketed outline (corner brackets, dashed baseline) ── */
.eyebrow.eb-v2 { padding: 8px 4px 11px; gap: 9px; }
.eyebrow.eb-v2::before, .eyebrow.eb-v2::after {
  content: ""; position: absolute; width: 11px; height: 11px; z-index: 2;
  border: 2px solid var(--accent); animation: none;
}
.eyebrow.eb-v2::before { left: -8px; top: 0; border-right: 0; border-bottom: 0; }
.eyebrow.eb-v2::after { right: -8px; bottom: 5px; border-left: 0; border-top: 0; display: block; }
.eyebrow.eb-v2 > span {
  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); padding-bottom: 4px;
}

/* ── v3 — Editorial: glowing icon disc + hairline + label ── */
.eyebrow.eb-v3 { gap: 0; }
.eyebrow.eb-v3 .ico {
  width: 30px; height: 30px; padding: 7px; border-radius: 50%; box-sizing: border-box;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 18px -6px var(--accent);
  margin-right: 12px;
}
.eyebrow.eb-v3 > span { padding-left: 14px; }
.eyebrow.eb-v3 > span::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 18px; background: linear-gradient(var(--accent), transparent);
}

/* ── v4 — Ticket stub (left perforation notch, dashed divider) ── */
.eyebrow.eb-v4 {
  padding: 10px 18px 10px 20px; gap: 12px; border-radius: 6px 16px 16px 6px;
  background: rgba(9, 10, 22, 0.82); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 12px 30px -18px var(--accent);
  -webkit-mask: radial-gradient(circle 6px at 0 50%, transparent 6px, #000 6.5px);
  mask: radial-gradient(circle 6px at 0 50%, transparent 6px, #000 6.5px);
  backdrop-filter: blur(8px);
}
.eyebrow.eb-v4 .ico { padding-right: 12px; border-right: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent); width: 28px; box-sizing: content-box; }

/* ── v5 — Underline tab (no fill, thick animated accent underline + top tick) ── */
.eyebrow.eb-v5 { padding: 6px 2px 12px; gap: 9px; }
.eyebrow.eb-v5::before {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 10%, transparent));
  box-shadow: 0 0 12px -2px var(--accent); border-radius: 3px;
}
.eyebrow.eb-v5::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 3px; border-radius: 3px;
  background: #fff; box-shadow: 0 0 10px #fff; display: block;
  animation: eb-scan 4s ease-in-out infinite;
}
@keyframes eb-scan { 0%, 100% { left: 0; } 50% { left: calc(100% - 26px); } }

/* ── v6 — Double-ring chip (icon in filled circle, outer faint ring) ── */
.eyebrow.eb-v6 {
  padding: 7px 18px 7px 7px; gap: 11px; border-radius: 999px;
  background: rgba(9, 10, 22, 0.7);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent);
  backdrop-filter: blur(8px);
}
.eyebrow.eb-v6 .ico {
  width: 30px; height: 30px; padding: 7px; border-radius: 50%; box-sizing: border-box; stroke: #06060e;
  background: var(--accent); box-shadow: 0 0 16px -4px var(--accent);
}

@media (prefers-reduced-motion: reduce) { .eyebrow.eb-v5::after { animation: none; } }
@media (max-width: 820px) { .eyebrow[class*="eb-v"] { justify-content: flex-start; } }